/* assistant/module.css: the launcher and the chat panel. Chrome, so it keeps
   its own borders rather than reading the --panel-* block-style tokens: a
   floating panel with no border because somebody chose Flat would be
   unreadable over the page behind it. */

.ai-launcher{position:fixed;bottom:20px;right:20px;z-index:500;display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:var(--sage);color:var(--paper);
  cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,0.25);}
.ai-launcher .ic{width:26px;height:26px;}
.ai-launcher:hover{filter:brightness(1.08);}

.ai-panel{position:fixed;bottom:82px;right:20px;max-width:calc(100vw - 40px);max-height:calc(100vh - 120px);
  background:var(--paper-raised);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 4px 20px rgba(0,0,0,0.3);z-index:500;display:flex;flex-direction:column;overflow:hidden;}
.ai-panel-compact{width:340px;height:480px;}
.ai-panel-wide{width:720px;height:560px;}
.ai-panel-tall{width:720px;height:calc(100vh - 120px);}

/* Named explicitly rather than relying on the shared select rule, which is
   (0,1,1) and would stretch this to the full header width. */
.ai-mode-select{font-size:11px;padding:0 4px;height:22px;border:1px solid var(--line);border-radius:999px;
  background:var(--paper);color:var(--ink-soft);width:auto;max-width:88px;flex-shrink:0;}
.ai-mode-select:hover{color:var(--ink);border-color:var(--line-strong);}

/* One row of icons: four bordered buttons could not fit 340px. */
.ai-head{display:flex;align-items:center;gap:6px;padding:8px 10px 8px 12px;border-bottom:1px solid var(--line);flex-shrink:0;}
.ai-head-mark{width:19px;height:19px;flex-shrink:0;color:var(--sage-ink);}
.ai-head-title{font-size:14px;font-weight:600;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.ai-head-spacer{flex:1;}
.ai-head-btn{width:28px;height:28px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  padding:0;border:0;border-radius:6px;background:transparent;color:var(--ink-soft);cursor:pointer;}
.ai-head-btn .ic{width:17px;height:17px;}
.ai-head-btn:hover{background:var(--subtle-bg);color:var(--ink);}
.ai-head-btn.active{background:var(--sage-soft);color:var(--sage-ink);}
.ai-history{max-height:150px;overflow-y:auto;padding:4px 12px 8px;border-bottom:1px solid var(--line);flex-shrink:0;}
.ai-history-row{padding:6px 0;border-top:1px solid var(--line);cursor:pointer;font-size:13px;}
.ai-history-row.current{font-weight:600;}
.ai-history-row .micro-text{color:var(--ink-soft);}

.ai-messages{flex:1;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:8px;}
.ai-composer{padding:10px 14px;border-top:1px solid var(--line);display:flex;gap:8px;flex-shrink:0;}
.ai-composer input{flex:1;min-width:0;}

/* A turn: bubble, artifacts, strip, time, usage. Stretches when it carries an
   artifact, because align-self:flex-start sizes a flex item to its content. */
.ai-turn{display:flex;flex-direction:column;gap:2px;max-width:85%;align-self:flex-start;}
.ai-turn.mine{align-self:flex-end;}
.ai-turn.wide{align-self:stretch;width:100%;max-width:none;}
.ai-turn.mine .ai-time{align-self:flex-end;}
.ai-time,.ai-usage,.ai-resolved{color:var(--ink-soft);}
.ai-bubble{border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:13px;background:var(--paper);}
.ai-turn.mine .ai-bubble{background:var(--sage-soft);}
.ai-bubble p{margin:0 0 8px;}
.ai-bubble p:last-child{margin-bottom:0;}
.ai-bubble ul,.ai-bubble ol{margin:0 0 8px;padding-left:20px;}
.ai-bubble li{margin:2px 0;}
.ai-bubble code{font-family:var(--font-mono);font-size:12px;background:var(--subtle-bg);padding:1px 4px;border-radius:3px;}
.ai-bubble pre{margin:0 0 8px;padding:8px;background:var(--subtle-bg);border-radius:6px;overflow-x:auto;}
.ai-bubble pre code{background:none;padding:0;}
.ai-md-h{font-weight:600;margin:6px 0 4px;}
.ai-confirm{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--paper-raised);display:flex;flex-direction:column;gap:6px;}
.ai-confirm .micro-text{color:var(--ink-soft);}
.ai-confirm-summary{font-size:13px;}
.ai-link{align-self:flex-start;}

.ai-artifact{border:1px solid var(--line);border-radius:8px;background:var(--paper);overflow:hidden;margin-top:4px;}
.ai-artifact-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line);}
.ai-artifact-title{font-size:13px;font-weight:600;}
.ai-artifact-actions{display:flex;gap:4px;flex-shrink:0;}
/* Its own scroller: a wide table must never make the whole page scroll sideways. */
.ai-artifact-scroll{overflow-x:auto;max-height:320px;overflow-y:auto;}
.ai-artifact-scroll table.data{border:none;border-radius:0;}
.ai-artifact-canvas{position:relative;height:260px;padding:8px;}

.typing-dots{display:inline-flex;align-items:center;gap:3px;padding:2px 0;}
.typing-dots span{width:6px;height:6px;border-radius:50%;background:var(--ink-soft);opacity:0.4;animation:typing-bounce 1.2s infinite ease-in-out;}
.typing-dots span:nth-child(2){animation-delay:0.2s;}
.typing-dots span:nth-child(3){animation-delay:0.4s;}
@keyframes typing-bounce{
  0%, 60%, 100%{transform:translateY(0);opacity:0.4;}
  30%{transform:translateY(-4px);opacity:1;}
}

@media (max-width: 760px){
  /* One state on a phone: there is no room to choose between three. */
  .ai-panel,.ai-panel-compact,.ai-panel-wide,.ai-panel-tall{
    width:calc(100vw - 20px);right:10px;bottom:74px;height:calc(100vh - 100px);}
  .ai-artifact-canvas{height:200px;}
  /* A header button is a tap target: the mobile rail's 30px floor. */
  .ai-head-btn{width:32px;height:32px;}
}