/* otis.css — OTIS, the plant's AI operator, docked on every suite page.
   Uses the page's own tokens (--bg-1, --line, --text, --flow...), so it follows both themes. */
.otis-dock{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:70;
  display:flex;align-items:center;gap:10px;background:var(--bg-1);border:1px solid var(--line-2);border-radius:40px;padding:5px 14px 5px 5px;
  cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.28);font:600 .86rem var(--sans,system-ui);color:var(--text)}
.otis-dock:hover{border-color:var(--flow)}
.otis-dock img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--flow)}
.otis-dock .n{min-width:20px;height:20px;border-radius:10px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;
  font:700 .7rem var(--mono,monospace);background:var(--warn);color:var(--bg,#000)}
.otis-dock .n.bad{background:var(--trip)}
.otis-dock .n[hidden]{display:none}
.otis-dock[hidden]{display:none}

.otis-peek{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:70;
  width:min(340px,calc(100vw - 36px));background:var(--bg-1);border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;
  box-shadow:0 14px 34px rgba(0,0,0,.3);font:400 .86rem/1.5 var(--sans,system-ui);color:var(--text)}
.otis-peek .who{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:6px}
.otis-peek .who img{width:26px;height:26px;border-radius:50%;object-fit:cover}
.otis-peek .x{margin-left:auto;background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:1rem;line-height:1}
.otis-peek .more{display:inline-block;margin-top:6px;background:transparent;border:0;color:var(--flow);font-weight:600;cursor:pointer;padding:0}
.otis-peek[hidden]{display:none}

.otis-panel{position:fixed;top:0;right:0;bottom:0;z-index:75;width:min(400px,100vw);background:var(--bg-1);border-left:1px solid var(--line-2);
  box-shadow:-12px 0 36px rgba(0,0,0,.25);display:flex;flex-direction:column;font:400 .88rem/1.5 var(--sans,system-ui);color:var(--text);
  padding-top:env(safe-area-inset-top,0px)}
.otis-panel[hidden]{display:none}
.otis-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.otis-head img,.otis-head video{width:58px;height:58px;border-radius:50%;object-fit:cover;border:2px solid var(--flow);background:#f3efe6}
.otis-head b{display:block;font-size:1.02rem;letter-spacing:.01em}
.otis-head span{color:var(--muted);font-size:.8rem}
.otis-head .x{margin-left:auto;background:transparent;border:1px solid var(--line-2);border-radius:6px;color:var(--text);cursor:pointer;padding:4px 9px;font-weight:600}
.otis-body{flex:1;overflow-y:auto;padding:12px 16px 16px}
.otis-sec{font-size:.74rem;color:var(--dim,var(--muted));margin:4px 0 8px;font-weight:600}
.otis-card{border:1px solid var(--line);border-left:3px solid var(--flow);border-radius:8px;padding:9px 11px;margin-bottom:8px;background:var(--bg)}
.otis-card.warn{border-left-color:var(--warn)}.otis-card.bad{border-left-color:var(--trip)}.otis-card.ok{border-left-color:var(--good)}
.otis-card .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.otis-card button{background:transparent;border:1px solid var(--line-2);border-radius:6px;padding:4px 10px;cursor:pointer;font:600 .78rem var(--sans,system-ui);color:var(--flow)}
.otis-card button:hover{border-color:var(--flow)}
.otis-card button[disabled]{opacity:.5;cursor:wait}
.otis-chat{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.otis-msg{margin:8px 0;max-width:92%;padding:8px 11px;border-radius:10px;white-space:pre-wrap;overflow-wrap:anywhere}
.otis-msg.u{margin-left:auto;background:var(--bg-2,var(--bg));border:1px solid var(--line)}
.otis-msg.a{background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--flow)}
.otis-msg.a a{color:var(--flow);font-weight:600}
.otis-msg.e{color:var(--trip);border:1px dashed var(--trip)}
.otis-msg .m{display:block;margin-top:4px;font:500 .68rem var(--mono,monospace);color:var(--dim,var(--muted))}
.otis-sugg{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.otis-sugg button{background:transparent;border:1px dashed var(--line-2);border-radius:14px;padding:3px 10px;cursor:pointer;font-size:.76rem;color:var(--muted)}
.otis-sugg button:hover{color:var(--text);border-color:var(--flow)}
.otis-form{border-top:1px solid var(--line);padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));display:grid;gap:6px}
.otis-form textarea{width:100%;min-height:54px;max-height:160px;resize:vertical;background:var(--bg);border:1px solid var(--line-2);border-radius:8px;padding:8px 10px;color:var(--text);font:inherit}
.otis-form .r{display:flex;align-items:center;gap:8px}
.otis-form .note{font-size:.72rem;color:var(--dim,var(--muted));flex:1}
.otis-form button{background:var(--flow);border:1px solid var(--flow);color:var(--bg,#000);border-radius:7px;padding:6px 14px;font-weight:700;cursor:pointer}
.otis-form button[disabled]{opacity:.5;cursor:wait}
.otis-typing{color:var(--muted);font-size:.8rem;margin:6px 0}
@media (max-width:640px){.otis-dock span.l{display:none}.otis-dock{padding:4px}}
@media print{.otis-dock,.otis-peek,.otis-panel{display:none!important}}