/* Forge Agent drawer.
   EVERY colour here comes from the foundation.css token set, never a literal, because the portal
   ships light by default (scripts/theme-boot.js sets data-theme="light" unless the user chose dark)
   and styles/theme-light.css re-points the tokens rather than restating the components. This file
   used to hard-code the dark palette: .ag-msg.bot painted #e7e7ef text on var(--surface-1), which
   resolves to #FFFFFF in light mode, so every reply the Agent gave was near-white on white at about
   1.2:1 contrast. The suggestion chips, the composer text and the attach/mic buttons had the same
   fault. The fallbacks below are the previous literals, so dark mode is byte-for-byte unchanged. */
#agentFab{position:fixed;right:22px;bottom:22px;z-index:1400;display:none;align-items:center;gap:9px;padding:12px 18px 12px 14px;border:none;border-radius:100px;cursor:pointer;font-family:inherit;font-weight:700;font-size:13.5px;color:#fff;background:linear-gradient(135deg,#2E7CF6,#2BD0C5);box-shadow:0 8px 28px rgba(46,124,246,.4);transition:transform .15s, box-shadow .15s;}
/* Authentication boundary: the Agent lives outside #app so it can dock over every signed-in
   screen. It must fail closed on login, signup, reset and session-verification screens. */
body.forge-authenticated #agentFab{display:flex;}
#agentFab:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(79,107,255,.5);}
#agentFab .af-dot{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;}
#agentDrawer{position:fixed;top:0;right:0;height:100vh;width:380px;max-width:92vw;z-index:1500;background:var(--canvas,#0a0b12);border-left:1px solid var(--border,#22222c);display:none;flex-direction:column;transform:translateX(105%);transition:transform .26s cubic-bezier(.4,0,.2,1);box-shadow:-18px 0 50px rgba(0,0,0,.45);}
body.forge-authenticated #agentDrawer{display:flex;}
#agentDrawer.open{transform:translateX(0);}
/* AGENT SIDEBAR PUSH (10/10 UX benchmark: Linear/Intercom-style side panel). On a wide screen the
   Agent is a docked panel, so the main content SHRINKS to sit beside it instead of hiding 380px of the
   screen behind it. The left rail is untouched; only .main reflows. Below 900px the drawer stays an
   overlay (there isn't room to shrink content and keep it usable). Matches the drawer's own .26s ease. */
@media(min-width:900px){
  .app-layout .main{transition:margin-right .26s cubic-bezier(.4,0,.2,1)!important;}
  body.agent-open .main{margin-right:380px;}
  body[data-forge-mode="agent"] #agentDrawer{width:460px;max-width:42vw;}
  body[data-forge-mode="agent"].agent-open .main{margin-right:min(460px,42vw);}
}
body[data-forge-mode="agent"].agent-open #agentFab{display:none;}
body[data-forge-mode="agent"] #agentDrawer{box-shadow:-18px 0 60px rgba(11,15,26,.24);}
.ag-head{padding:16px 16px 12px;border-bottom:1px solid var(--border,#22222c);}
.ag-head-top{display:flex;align-items:center;justify-content:space-between;}
.ag-title{display:flex;align-items:center;gap:9px;font-weight:800;font-size:15px;}
.ag-title .ag-orb{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#2E7CF6,#2BD0C5);box-shadow:0 0 14px rgba(46,124,246,.5);}
.ag-x{background:transparent;border:none;color:var(--text-muted,#A8B0C2);cursor:pointer;font-size:20px;line-height:1;padding:4px;border-radius:6px;}
.ag-x:hover{color:var(--text,#fff);background:var(--surface-2,#1a1a22);}
.ag-tabs{display:flex;gap:6px;margin-top:13px;background:var(--surface-2,#1c1f2b);padding:4px;border-radius:10px;}
.ag-tab{flex:1;padding:7px;border:none;background:transparent;color:var(--text-muted,#A8B0C2);font-family:inherit;font-weight:700;font-size:12.5px;border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;}
.ag-tab.active{background:rgba(46,124,246,.12);color:var(--text,#fff);box-shadow:inset 0 0 0 1px rgba(43,208,197,.3);}
.ag-sub{font-size:11.5px;color:var(--text-dim,#7a7a90);margin-top:9px;line-height:1.4;}
.ag-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;}
.ag-msg{max-width:88%;padding:10px 13px;border-radius:13px;font-size:13.5px;line-height:1.5;white-space:pre-wrap;}
.ag-msg.user{align-self:flex-end;background:var(--gradient-brand,linear-gradient(100deg,#2E7CF6,#2E7CF6,#2BD0C5));color:#fff;border-bottom-right-radius:4px;}
.ag-msg.bot{align-self:flex-start;background:var(--surface-1,#14161f);border:1px solid var(--border,#22222c);color:var(--text,#e7e7ef);border-bottom-left-radius:4px;}
.ag-msg.bot a{color:var(--cyan,#2BD0C5);}
.ag-typing{align-self:flex-start;color:var(--text-dim,#7a7a90);font-size:12.5px;padding:4px 6px;}
.ag-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 10px;}
.ag-chip{padding:7px 11px;background:var(--surface-2,#1c1f2b);border:1px solid var(--border,#22222c);border-radius:100px;color:var(--text,#F4F6FB);font-size:12px;cursor:pointer;font-family:inherit;}
.ag-chip:hover{border-color:var(--cyan,#2BD0C5);color:var(--text,#fff);}
.ag-input{padding:12px 14px;border-top:1px solid var(--border,#22222c);display:flex;gap:8px;align-items:flex-end;}
.ag-input textarea{flex:1;background:var(--surface-2,#1c1f2b);border:1px solid var(--border,#22222c);border-radius:10px;color:var(--text,#fff);font-family:inherit;font-size:13.5px;padding:11px 12px;resize:none;min-height:44px;max-height:120px;outline:none;}
.ag-input textarea::placeholder{color:var(--text-muted,#A8B0C2);opacity:1;}
.ag-input textarea:focus{border-color:var(--cyan,#2BD0C5);}
.ag-send{width:44px;height:44px;flex:0 0 44px;border:none;border-radius:10px;background:var(--gradient-brand,linear-gradient(100deg,#2E7CF6,#2E7CF6,#2BD0C5));color:#fff;cursor:pointer;font-size:16px;}
.ag-send:disabled{opacity:.4;cursor:default;}
.ag-iconbtn{width:38px;height:44px;flex:0 0 38px;border:1px solid var(--border,#22222c);border-radius:10px;background:var(--surface-2,#15151d);color:var(--text-muted,#A8B0C2);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.ag-iconbtn:hover{color:var(--text,#fff);border-color:var(--cyan,#2BD0C5);}
.ag-iconbtn.rec{color:#fff;background:#e0245e;border-color:#e0245e;animation:agpulse 1s infinite;}
/* The "+" opens the attach choices instead of every attachment type owning a permanent button. Two
   icons for two file pickers is two things to read before you have typed anything. */
.ag-plus-wrap{position:relative;flex:0 0 auto;display:flex;align-items:flex-end;}
.ag-plus-menu{position:absolute;bottom:calc(100% + 6px);left:0;z-index:10;min-width:230px;background:var(--surface-2,#15151d);border:1px solid var(--border,#22222c);border-radius:10px;padding:5px;box-shadow:0 12px 30px rgba(0,0,0,.4);}
.ag-plus-menu[hidden]{display:none;}
.ag-plus-menu button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:7px;padding:9px 10px;font:inherit;font-size:13px;color:var(--text,#fff);cursor:pointer;}
.ag-plus-menu button:hover,.ag-plus-menu button:focus-visible{background:var(--surface-3,#1c1f2b);}
.ag-iconbtn.busy{color:#0b0b10;background:#2BD0C5;border-color:#2BD0C5;cursor:wait;animation:agpulse 1.4s infinite;}
@keyframes agpulse{0%,100%{opacity:1}50%{opacity:.45}}
.ag-attach-chip{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2,#1c1f2b);border:1px solid var(--border,#22222c);border-radius:10px;padding:6px 8px;max-width:100%;}
.ag-attach-chip img{width:34px;height:34px;object-fit:cover;border-radius:6px;}
.ag-attach-chip button{background:none;border:none;color:var(--text-muted,#A8B0C2);cursor:pointer;font-size:15px;line-height:1;}
.ag-msg img.ag-userimg{max-width:180px;border-radius:10px;margin-top:6px;display:block;}
.ag-coach-card{background:var(--surface-1,#14161f);border:1px solid var(--border,#22222c);border-radius:12px;padding:13px 14px;}
.ag-coach-card h4{margin:0 0 5px;font-size:13.5px;}
.ag-coach-card p{margin:0 0 10px;font-size:12.5px;color:var(--text-2,var(--text-muted,#b6b6c4));line-height:1.45;}
.ag-tag{display:inline-block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:3px 8px;border-radius:100px;margin-bottom:8px;}
.ag-tag.strong{background:var(--success-bg,rgba(46,204,113,.14));color:var(--success,#4ade80);border:1px solid rgba(46,204,113,.3);}
.ag-tag.low{background:var(--warning-bg,rgba(245,180,40,.12));color:var(--warning,#fbbf24);border:1px solid rgba(245,180,40,.3);}
.ag-coach-card .btn-secondary,.ag-coach-card .btn-primary{padding:7px 12px;font-size:12px;}
@media(max-width:520px){
  #agentDrawer{width:100vw;max-width:100vw;}#agentFab{right:12px;bottom:82px;padding:10px 14px;font-size:12.5px;}
  /* Keep a real writing area on phones. Attachments sit on their own compact toolbar row; the
     textarea then receives the whole second row apart from Send. */
  /* The composer stays ONE row at every width. It used to become a grid here with the icons on their
     own row above the box, which pushed the thing you type into second place on the screen where it
     matters most. Three narrower controls fit beside the box; the box takes what is left. */
  .ag-input{padding:10px 12px;gap:6px;}
  .ag-input .ag-iconbtn{width:34px;flex:0 0 34px;}
  .ag-input .ag-send{width:40px;flex:0 0 40px;}
  .ag-input textarea{min-width:0;}
}
[data-theme="light"] #agentDrawer{box-shadow:-18px 0 50px rgba(11,15,26,.14);}
[data-theme="light"] .ag-head,[data-theme="light"] .ag-input{background:#fff;}
[data-theme="light"] .ag-msg.bot,[data-theme="light"] .ag-coach-card{background:#fff;}
[data-theme="light"] .ag-tab.active{background:linear-gradient(90deg,rgba(46,124,246,.14),rgba(43,208,197,.12));}

/* Mobile Setup > Settings: desktop side-by-side rows must not squeeze copy into a narrow column.
   Selects and action buttons get their own full-width row; true toggles remain aligned to the title.

   Rows whose display is owned by script are excluded. #apiKeyResult is a .settings-row that
   settings-reliability.js keeps at inline display:none before a key exists and after a revoke, and
   switches to display:flex to lay its own generated content out in a column. A blanket
   display:grid!important here would both reveal the empty row and break that column, and an inline
   style cannot win against !important. The [style*="display:none"] rule below keeps the same
   protection for any future script-hidden row. */
@media(max-width:640px){
  #automationsSection .section-body>.settings-row:not(#apiKeyResult),
  #forgeAgentSection .section-body>.settings-row:not(#apiKeyResult){
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start!important;
    column-gap:12px!important;
    row-gap:12px!important;
    padding:18px 0!important;
  }
  #automationsSection .section-body>.settings-row>.settings-info,
  #forgeAgentSection .section-body>.settings-row>.settings-info{
    grid-column:1;
    min-width:0!important;
    width:100%!important;
  }
  #automationsSection .settings-name,
  #forgeAgentSection .settings-name{
    line-height:1.35;
    margin-bottom:6px;
    overflow-wrap:normal;
    word-break:normal;
  }
  #automationsSection .settings-desc,
  #forgeAgentSection .settings-desc{
    line-height:1.55;
    margin:0;
    overflow-wrap:break-word;
    word-break:normal;
  }
  #automationsSection .section-body>.settings-row>label.toggle,
  #forgeAgentSection .section-body>.settings-row>label.toggle{
    grid-column:2;
    grid-row:1;
    align-self:start;
  }
  #automationsSection .section-body>.settings-row>select.form-input,
  #automationsSection .section-body>.settings-row>input.form-input,
  #automationsSection .section-body>.settings-row>button,
  #forgeAgentSection .section-body>.settings-row>select.form-input,
  #forgeAgentSection .section-body>.settings-row>input.form-input,
  #forgeAgentSection .section-body>.settings-row>button{
    grid-column:1/-1;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    box-sizing:border-box;
  }
  #automationsSection .section-body>.settings-row>:not(.settings-info):not(label.toggle):not(select.form-input):not(input.form-input):not(button),
  #forgeAgentSection .section-body>.settings-row>:not(.settings-info):not(label.toggle):not(select.form-input):not(input.form-input):not(button){
    grid-column:1/-1;
    min-width:0;
    width:100%;
  }
  #agentTaskApprovals>div[style*="justify-content:space-between"]{
    display:grid!important;
    grid-template-columns:minmax(0,1fr);
    align-items:stretch!important;
    gap:9px!important;
  }
  #agentTaskApprovals>div[style*="justify-content:space-between"]>div{min-width:0;}
  #agentTaskApprovals>div[style*="justify-content:space-between"]>select{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    box-sizing:border-box;
  }
  /* Last, so it wins: a settings row that script has hidden stays hidden at every width. Without
     this, the responsive rules above reveal it.
     Both spellings are required. The markup ships `style="display:none"` with no space, but anything
     hidden at runtime through `el.style.display = 'none'` — which is how forgeSettingsFilter hides
     rows that do not match a search — is re-serialised by CSSOM as `display: none;` WITH a space. A
     selector matching only the compact form silently misses every filtered row. */
  #automationsSection .section-body>.settings-row[style*="display:none"],
  #automationsSection .section-body>.settings-row[style*="display: none"],
  #forgeAgentSection .section-body>.settings-row[style*="display:none"],
  #forgeAgentSection .section-body>.settings-row[style*="display: none"]{display:none!important;}
}