/* Agent console styles. Extracted from index.html for the same reason as
   app.js: so style-src can drop 'unsafe-inline'. */
/* =============================================================
   Old Port unified inbox. One app, three accounts:
   Athul Iyju Jacob · Old Port India · Old Port UAE
   Deploy anywhere static (Cloudflare Pages / Hostinger).
   Set API below to the Worker URL.
   ============================================================= */
:root{
  --red:#E10600;--black:#0A0A0C;--ink:#141418;--line:#26262C;--line2:#33333B;
  --mute:#8E8E98;--mute2:#B9B9C2;--paper:#17171B;--ok:#39C26B;--warn:#E0A200;
  --ease:cubic-bezier(.22,.61,.36,1);
  --f:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --m:ui-monospace,"SF Mono",Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--black);color:#fff;font-family:var(--f);font-size:14px;-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,textarea,select{font:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ---------------- login ---------------- */
#login{position:fixed;inset:0;display:grid;place-items:center;padding:20px;background:var(--black);z-index:50}
.lg{width:100%;max-width:370px}
.lg__m{display:flex;align-items:center;gap:10px;margin-bottom:26px}
/* The lockup already contains the wordmark, so there is no separate text
   beside it. height, not max-height: see the build notes. */
.lg__m img{height:62px;width:auto;display:block}
.lg__m b{font-size:19px;letter-spacing:.01em}
.lg h1{font-size:22px;margin:0 0 6px}
.lg p{color:var(--mute);margin:0 0 24px;font-size:13.5px;line-height:1.5}
.lg label{display:block;font-size:12px;color:var(--mute);margin:0 0 6px}
.lg input{width:100%;background:var(--ink);border:1px solid var(--line);color:#fff;padding:13px 14px;margin-bottom:14px;transition:border-color .2s}
.lg input:focus{outline:0;border-color:var(--red)}
.lg button{width:100%;background:var(--red);border:0;color:#fff;padding:14px;font-weight:600;cursor:pointer;transition:background .2s}
.lg button:hover{background:#fff;color:#000}
.lg__e{color:#FF6A62;font-size:13px;min-height:18px;margin-top:10px}

/* ---------------- shell ---------------- */
#app{display:none;grid-template-columns:232px 330px 1fr;height:100vh}
#app.on{display:grid}

/* rail */
.rail{background:#0D0D10;border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;min-height:0}
.rail__t{padding:17px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px}
.rail__logo{height:22px;width:auto;flex:0 0 auto;display:block}
.rail__t b{font-size:14.5px}
.rail__s{padding:14px 12px 8px;font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#5A5A64}
.acct{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;color:var(--mute2);padding:11px 14px;cursor:pointer;text-align:left;border-left:2px solid transparent;transition:background .2s,color .2s,border-color .2s}
.acct:hover{background:var(--ink);color:#fff}
.acct.on{background:var(--ink);color:#fff;border-left-color:var(--red)}
.acct__i{width:26px;height:26px;flex:0 0 26px;border-radius:5px;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff}
.acct__n{flex:1;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct__c{font-family:var(--m);font-size:10.5px;background:var(--red);color:#fff;padding:2px 6px;border-radius:9px;display:none}
.acct__c.on{display:inline-block}
.rail__f{margin-top:auto;padding:14px;border-top:1px solid var(--line);font-size:12px;color:var(--mute)}
.rail__f button{background:none;border:0;color:var(--mute);cursor:pointer;padding:0;text-decoration:underline;font-size:12px}
.rail__f button:hover{color:#fff}

/* list */
.list{background:#0F0F13;border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;min-height:0}
.list__t{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}
.list__t h2{font-size:14.5px;margin:0}
.list__t span{font-family:var(--m);font-size:10.5px;color:var(--mute)}
.filters{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);overflow-x:auto}
.filters button{background:none;border:1px solid var(--line2);color:var(--mute);padding:6px 11px;font-size:12px;cursor:pointer;white-space:nowrap;transition:all .2s}
.filters button.on{background:var(--red);border-color:var(--red);color:#fff}
/* min-height:0 is load-bearing on every one of these, and its absence is
   why the thread list stopped scrolling at 47 conversations.

   A flex or grid item defaults to min-height:auto, which means "never
   shrink below your content". So a column of 47 rows did not become a
   300px box with a scrollbar, it became a 6,000px box, and
   overflow-y:auto had nothing to overflow. body{overflow:hidden} then
   swallowed the page scroll as well, so there was no way to reach
   conversation ten onwards at all: the data was loaded, counted in the
   header, rendered in the DOM, and unreachable.

   It needs declaring on the scrolling box AND on every flex or grid
   ancestor between it and the fixed-height shell, because any one of them
   left at auto re-introduces the same floor. */
.list__b{flex:1;overflow-y:auto;min-height:0}
.conv{display:block;width:100%;background:none;border:0;border-bottom:1px solid var(--line);color:#fff;padding:13px 16px;cursor:pointer;text-align:left;border-left:2px solid transparent;transition:background .2s,border-color .2s}
.conv:hover{background:var(--ink)}
.conv.on{background:var(--ink);border-left-color:var(--red)}
.conv__h{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.conv__d{width:7px;height:7px;border-radius:50%;flex:0 0 7px;background:var(--line2)}
.conv__d.need{background:var(--red);animation:pulse 1.6s infinite}
.conv__d.live{background:var(--ok)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.conv__n{font-size:13.5px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv__tm{font-family:var(--m);font-size:10.5px;color:var(--mute)}
.conv__p{font-size:12.5px;color:var(--mute);line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.conv__tag{display:inline-block;font-family:var(--m);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;margin-top:7px;border:1px solid var(--line2);color:var(--mute)}
.empty{padding:40px 20px;text-align:center;color:var(--mute);font-size:13px;line-height:1.6}

/* thread */
.thread{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--black)}
.thread__t{padding:13px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.thread__t h2{font-size:15px;margin:0;flex:1;min-width:0}
.thread__t small{display:block;color:var(--mute);font-size:11.5px;font-weight:400;margin-top:3px}
.btn{background:none;border:1px solid var(--line2);color:#fff;padding:8px 14px;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .2s}
.btn:hover{border-color:#fff}
.btn.red{background:var(--red);border-color:var(--red)}
.btn.red:hover{background:#fff;color:#000;border-color:#fff}
.btn:disabled{opacity:.45;cursor:default}
.thread__b{flex:1;overflow-y:auto;min-height:0;padding:20px 18px;background:#08080A}
/* width:fit-content is the whole fix, and it is not decoration.
   max-width on a block element caps a width that is still `auto`, and an
   auto-width block fills its line box, so every bubble rendered at exactly
   72% of the pane whatever it held. "Hello" came out as a 900px slab, and
   margin-left:auto did nothing at all, because there was no free space left
   for it to absorb. fit-content makes the bubble as wide as its content, the
   cap still applies to long messages, and the auto margins finally push each
   side where it belongs.
   The ch cap is the readability half of it: 68ch is a comfortable measure,
   and on a wide monitor 72% of the pane is well past it. */
.msg{width:fit-content;max-width:min(72%,68ch);margin-bottom:12px;padding:11px 14px;font-size:14px;line-height:1.55;overflow-wrap:anywhere;animation:in .3s var(--ease) both}
@keyframes in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.msg.user{background:var(--paper);border:1px solid var(--line);margin-right:auto}
.msg.assistant{background:#15151A;border:1px solid var(--line);border-left:2px solid var(--line2);margin-left:auto;color:var(--mute2)}
.msg.agent{background:var(--red);margin-left:auto}
/* The system line is a centred full-width rule, not a bubble, so it opts out
   of fit-content: shrinking it to its text would leave text-align:center
   with nothing to centre within. */
.msg.system{width:auto;background:none;color:var(--mute);font-size:11.5px;text-align:center;max-width:100%;padding:5px 0}
.msg__w{font-family:var(--m);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;opacity:.65;display:block;margin-bottom:4px}
.thread__f{border-top:1px solid var(--line);padding:12px 16px;background:#0D0D10}
.thread__f textarea{width:100%;background:var(--ink);border:1px solid var(--line);color:#fff;padding:12px;resize:vertical;min-height:72px;transition:border-color .2s}
.thread__f textarea:focus{outline:0;border-color:var(--red)}
.thread__f textarea:disabled{opacity:.45}
.thread__a{display:flex;gap:9px;margin-top:10px;align-items:center;flex-wrap:wrap}
.thread__a .sp{flex:1}
.hint{font-size:11.5px;color:var(--mute)}
.meta{padding:12px 18px;border-bottom:1px solid var(--line);font-size:12px;color:var(--mute);display:flex;gap:18px;flex-wrap:wrap;background:#0D0D10}
.meta b{color:var(--mute2);font-weight:500}
.ph{display:grid;place-items:center;height:100%;color:var(--mute);text-align:center;padding:30px;line-height:1.7}

@media (max-width:1100px){
  #app.on{grid-template-columns:64px 300px 1fr}
  .acct__n,.rail__t b,.rail__s,.rail__f span{display:none}
  .acct{justify-content:center;padding:12px 6px}
  .rail__f{text-align:center;padding:12px 6px}
}
@media (max-width:820px){
  /* One column, and the rows MUST be bounded. Left as implicit auto rows,
     the list track sized itself to all 47 conversations inside a 100vh
     grid, which is the other half of the no-scroll bug above. The rail is
     auto (it is a row of account chips); everything after it gets the
     remaining height and no more. */
  #app.on{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .rail{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
  .rail__t,.rail__s,.rail__f{display:none}
  .acct{width:auto;flex:0 0 auto;border-left:0;border-bottom:2px solid transparent}
  .acct.on{border-left:0;border-bottom-color:var(--red)}
  .acct__n{display:block}
  .list{border-right:0}
  .thread{display:none}
  body.view-thread .list{display:none}
  body.view-thread .thread{display:flex}
  body.view-thread .rail{display:none}
  .back{display:inline-flex!important}
}
.back{display:none;background:none;border:0;color:#fff;font-size:20px;cursor:pointer;padding:0 6px 0 0}

/* ---------------- site manager ---------------- */
.addsite{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;border-top:1px solid var(--line);color:var(--mute);padding:12px 14px;cursor:pointer;text-align:left;font-size:13px;transition:background .2s,color .2s}
.addsite:hover{background:var(--ink);color:#fff}
.addsite .acct__i{background:transparent;border:1px dashed var(--line2);color:var(--mute);font-size:15px;font-weight:400}
.modal{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.76);display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility 0s linear .28s}
.modal.on{opacity:1;visibility:visible;transition:opacity .28s var(--ease),visibility 0s}
.modal__b{width:100%;max-width:620px;max-height:90vh;overflow-y:auto;background:#101014;border:1px solid var(--line);border-top:3px solid var(--red);transform:translateY(18px) scale(.98);transition:transform .28s var(--ease)}
.modal.on .modal__b{transform:none}
.modal__h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#101014}
.modal__h h3{margin:0;font-size:16px}
.modal__x{background:none;border:0;color:var(--mute);font-size:24px;cursor:pointer;line-height:1;padding:0 4px;transition:color .2s,transform .2s}
.modal__x:hover{color:var(--red);transform:rotate(90deg)}
.modal__c{padding:20px}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:12px;color:var(--mute);margin-bottom:6px}
.fld label em{font-style:normal;color:#5A5A64}
.fld input,.fld textarea,.fld select{width:100%;background:var(--ink);border:1px solid var(--line);color:#fff;padding:11px 12px;transition:border-color .2s}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:0;border-color:var(--red)}
.fld textarea{min-height:150px;resize:vertical;font-family:var(--m);font-size:12.5px;line-height:1.6}
.fld small{display:block;color:#5A5A64;font-size:11.5px;margin-top:5px;line-height:1.5}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
.sitelist{border:1px solid var(--line);margin-bottom:18px}
.siterow{display:flex;align-items:center;gap:11px;padding:11px 13px;border-bottom:1px solid var(--line)}
.siterow:last-child{border-bottom:0}
.siterow__n{flex:1;min-width:0}
.siterow__n b{display:block;font-size:13.5px}
.siterow__n span{font-size:11.5px;color:var(--mute);font-family:var(--m)}
.siterow button{background:none;border:1px solid var(--line2);color:var(--mute);padding:5px 10px;font-size:11.5px;cursor:pointer;transition:all .2s}
.siterow button:hover{border-color:#fff;color:#fff}
.pill{font-family:var(--m);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border:1px solid var(--line2);color:var(--mute)}
.modal__f{display:flex;gap:10px;align-items:center;padding:16px 20px;border-top:1px solid var(--line);position:sticky;bottom:0;background:#101014;flex-wrap:wrap}
.modal__e{color:#FF6A62;font-size:12.5px;flex:1;min-width:140px}
.snip{background:#08080A;border:1px solid var(--line);padding:12px;font-family:var(--m);font-size:11.5px;color:var(--mute2);white-space:pre-wrap;word-break:break-all;line-height:1.6}

.draft{border-top:1px solid var(--line);background:#17171B;padding:14px 16px}
.draft__h{margin:0 0 8px;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:#E0A200}
.draft__t{margin:0 0 12px;font-size:14px;line-height:1.55;color:#E6E6EA;white-space:pre-wrap}
.draft__a{display:flex;gap:8px}

/* ----------------------------------------------------------------- CSP
   These rules used to be style="..." attributes in index.html.

   The console is served with `style-src 'self'` and no 'unsafe-inline', so
   the browser DROPPED every one of them silently: no console error, no
   network failure, nothing in the Worker logs. #pane kept its attribute in
   the DOM while computing display:block and flex-direction:row, so the
   transcript laid its header, meta, messages and reply box out in a ROW and
   the message bubbles collapsed to one character per line.

   The fix is to move the styles here, not to add 'unsafe-inline' to the
   policy. This console serves customer transcripts; weakening its CSP to
   save eight lines of CSS is the wrong trade.

   Setting element.style from JavaScript is unaffected by this policy, which
   is why the show/hide in app.js kept working and masked the problem. Keep
   initial state in CSS and let JS toggle it.
   -------------------------------------------------------------------- */
#pane{display:none;flex-direction:column;height:100%;min-height:0}
#release{display:none}
#smForm,#smSnip,#smFoot{display:none}
#smNew{margin-bottom:20px}
#sr{min-height:80px}
/* Visible to a screen reader, not on screen. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Per-site accent colours are applied through these custom properties, set
   from JS with setProperty(), because a style="" attribute in an innerHTML
   string is dropped by the same policy. */
.acct__i{background:var(--accent,#33333B)}
.tag--site{border-color:var(--accent,#33333B);color:var(--accent,#8E8E98)}
.tag--live{border-color:var(--red);color:var(--red)}

/* ---------------- settings ---------------- */
.seth{font-family:var(--m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);margin:26px 0 12px;padding-top:18px;border-top:1px solid var(--line);font-weight:400}
.seth:first-child{margin-top:0;padding-top:0;border-top:0}
.sethint{font-size:13px;color:var(--mute);line-height:1.6;margin:0 0 14px;max-width:62ch}
/* min-height holds the row so the panel does not jump when a message appears
   and disappears, which on a form that reports success is every save. */
.setmsg{font-size:13px;margin:12px 0;min-height:18px;line-height:1.5}
.setmsg.ok{color:#5BD39A}
.setmsg.bad{color:#FF6A62}