:root{
  --bg:#0b0e14; --panel:#141926; --panel2:#1a2133; --line:#26304a;
  --tx:#e8ecf6; --mut:#93a0bd; --acc:#e87c20; --acc2:#ffb066;
  --ok:#37c978; --err:#ef5466;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);overscroll-behavior:none}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--tx);
  background:var(--bg);height:100dvh;display:flex;flex-direction:column}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;
  border-bottom:1px solid var(--line);background:var(--panel)}
.brand{font-size:16px}.ver{color:var(--mut);font-size:11px;margin-left:6px}
.tb-right{display:flex;align-items:center;gap:10px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.dot.on{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.dot.off{background:var(--err)}
.dot.wait{background:var(--acc);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.35}}

.errbar{background:#3a1420;color:#ffb3be;padding:8px 14px;font-size:12.5px;border-bottom:1px solid #5c2230}

main{flex:1;overflow:hidden;display:flex}
.tab{flex:1;overflow-y:auto;display:none;padding:12px 12px 90px}
.tab.active{display:block}
#tab-chat{display:none;flex-direction:column;padding:0;overflow:hidden}
#tab-chat.active{display:flex}
#msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}

.msg{max-width:86%;padding:10px 13px;border-radius:14px;line-height:1.45;font-size:14.5px;white-space:pre-wrap;word-break:break-word}
.msg.user{align-self:flex-end;background:linear-gradient(135deg,#f08c1e,#d96f07);border-bottom-right-radius:4px}
.msg.goose{align-self:flex-start;background:var(--panel2);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.sys{align-self:center;background:none;color:var(--mut);font-size:12px;padding:2px}
.msg .cursor{display:inline-block;width:8px;height:15px;background:var(--acc2);vertical-align:-2px;animation:pulse .8s infinite}
.chip{align-self:flex-start;background:#10182b;border:1px solid var(--line);color:var(--mut);
  font-size:11.5px;padding:4px 10px;border-radius:999px;max-width:86%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.composer{display:flex;gap:8px;align-items:flex-end;padding:10px;background:var(--panel);
  border-top:1px solid var(--line);padding-bottom:calc(env(safe-area-inset-bottom) + 10px)}
.composer textarea{flex:1;resize:none;background:var(--panel2);border:1px solid var(--line);color:var(--tx);
  border-radius:14px;padding:10px 12px;font-size:15px;max-height:120px;min-height:44px;line-height:1.4;outline:none}
.round{width:44px;height:44px;border-radius:50%;border:none;font-size:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.primary{background:linear-gradient(135deg,#f08c1e,#d96f07);color:#fff}
.primary:disabled{opacity:.45}
.ghost{background:var(--panel2);border:1px solid var(--line);color:var(--tx);border-radius:10px;padding:8px 12px;font-size:13px}
button{cursor:pointer}button:active{transform:scale(.97)}

.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(100%,520px);
  display:flex;background:var(--panel);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);z-index:40}
.tabbar button{flex:1;background:none;border:none;color:var(--mut);padding:12px 0;font-size:13px}
.tabbar button.active{color:var(--acc2);font-weight:600}

.sec-head{display:flex;align-items:center;justify-content:space-between;margin:2px 0 6px}
.sec-head h2{font-size:15px;margin:0}
.hint{color:var(--mut);font-size:12px;margin:6px 0}
.hist-item{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin:8px 0;cursor:pointer}
.hist-item .t{font-size:14px;font-weight:600;margin-bottom:3px}
.hist-item .m{font-size:11.5px;color:var(--mut)}

.resep{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin:8px 0;cursor:pointer}
.resep b{font-size:14px}.resep p{margin:4px 0 0;color:var(--mut);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.add-resep{margin-top:12px}.add-resep summary{color:var(--acc2);cursor:pointer}
.add-resep input,.add-resep textarea{width:100%;margin:8px 0;background:var(--panel2);border:1px solid var(--line);
  color:var(--tx);border-radius:10px;padding:10px;font-size:14px}

.modal,.sheet,.viewer{position:fixed;inset:0;background:rgba(4,6,10,.72);z-index:60;display:flex;align-items:center;justify-content:center;padding:18px}
.modal[hidden],.sheet[hidden],.viewer[hidden]{display:none}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;width:min(92vw,430px)}
.card h2{margin:0 0 12px;font-size:17px}
.card label{display:block;font-size:13px;color:var(--mut);margin:10px 0 4px}
.card input{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--tx);border-radius:10px;padding:11px;font-size:14px}
.row{display:flex;gap:8px;margin-top:14px}
.col{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.detail{background:#0d1322;border:1px solid var(--line);border-radius:10px;padding:10px;font-size:12px;max-height:180px;overflow:auto;white-space:pre-wrap}
.sheet{align-items:flex-end}
.sheet .card{width:min(100%,520px);border-radius:18px 18px 0 0;margin-bottom:calc(-1 * env(safe-area-inset-bottom));padding-bottom:calc(env(safe-area-inset-bottom) + 16px)}

.viewer{align-items:stretch;justify-content:center;flex-direction:column}
.v-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;color:var(--acc2)}
.v-body{flex:1;overflow-y:auto;padding:0 16px calc(env(safe-area-inset-bottom) + 20px)}
.v-msg{margin:10px 0;padding:10px 12px;border-radius:12px;font-size:13.5px;white-space:pre-wrap}
.v-msg.user{background:#233043;margin-left:10%}
.v-msg.assistant{background:var(--panel2);border:1px solid var(--line);margin-right:10%}
.v-role{font-size:10.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}

@media (min-width:700px){ main>.tab,#tab-chat{max-width:720px;margin:0 auto;width:100%} }