/* ============================================================
   VOLBOO: Support tickets layer
   Loads LAST, after css/styles.css.

   Two panes: the list of your conversations on the left, the open
   conversation on the right. The thread is the only part of the page
   that scrolls, so the composer stays under your thumb and the
   subject stays in view while you read back.

   On a phone the two panes become one screen at a time: the list,
   then the thread, with a back arrow between them.
   ============================================================ */

/* ------------------------------------------------------------
   1. Layout
   ------------------------------------------------------------ */
.sup-layout{
  display:grid;grid-template-columns:330px minmax(0,1fr);gap:16px;
  /* The page itself does not scroll: each pane owns its overflow, so
     the composer never drifts below the fold. */
  height:calc(100vh - var(--header-h) - 150px);
  min-height:520px;
}
.sup-pane{
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-xl);
}

/* ------------------------------------------------------------
   2. Ticket list
   ------------------------------------------------------------ */
.sup-list-head{
  padding:16px 16px 12px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.sup-list-titles{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sup-list-head h2{font-size:.875rem;font-weight:600;letter-spacing:-.015em}
.sup-list-head p{font-size:.71875rem;color:var(--text4);margin-top:2px}
/* Availability, stated once and quietly */
.sup-live{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  font-size:.65625rem;font-weight:600;color:var(--text3);
}
.sup-live-dot{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-light);
}

.sup-filters{display:flex;gap:6px;margin-top:12px}
.sup-filter{
  padding:5px 12px;border-radius:999px;
  border:1px solid var(--border);background:var(--bg);
  font-size:.71875rem;font-weight:600;color:var(--text3);
  cursor:pointer;transition:var(--transition);font-family:inherit;
}
.sup-filter:hover{border-color:var(--border-strong);color:var(--text)}
/* Neutral when active. The accent is spent on the conversation, not on
   the furniture around it. */
.sup-filter.active{background:var(--text);border-color:var(--text);color:var(--bg)}

.sup-items{flex:1;overflow-y:auto;padding:8px}

.sup-item{
  display:flex;gap:11px;align-items:flex-start;
  width:100%;text-align:left;
  padding:11px;border-radius:var(--radius-lg);
  border:1px solid transparent;background:none;
  cursor:pointer;transition:var(--transition);font-family:inherit;
  margin-bottom:2px;
}
.sup-item:hover{background:var(--bg-hover)}
/* The open conversation is marked with a rail down its edge rather than
   a coloured fill, so the list stays quiet while you read the thread. */
.sup-item.active{background:var(--bg-hover);position:relative}
.sup-item.active::before{
  content:'';position:absolute;left:0;top:12px;bottom:12px;
  width:3px;border-radius:0 3px 3px 0;background:var(--accent);
}
.sup-item-icon{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-input);color:var(--text3);font-size:.75rem;
}
.sup-item.active .sup-item-icon{background:var(--accent-light);color:var(--accent)}
.sup-item-body{min-width:0;flex:1}
.sup-item-top{display:flex;align-items:baseline;gap:8px}
.sup-item-subject{
  font-size:.8125rem;font-weight:600;color:var(--text);letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;
}
.sup-item-time{font-size:.65625rem;color:var(--text4);flex-shrink:0;white-space:nowrap}
.sup-item-preview{
  font-size:.71875rem;color:var(--text3);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sup-item-meta{display:flex;align-items:center;gap:8px;margin-top:7px}
.sup-item-ref{
  font-size:.625rem;color:var(--text4);font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
/* Unread count, only ever on a ticket you have not read */
.sup-unread{
  margin-left:auto;flex-shrink:0;
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--accent);color:#fff;
  font-size:.625rem;font-weight:700;line-height:18px;text-align:center;
}
[data-theme="dark"] .sup-unread{color:#07130f}

/* Status pill, used in the list and in the thread header */
.sup-status{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 9px;border-radius:999px;
  font-size:.625rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid transparent;white-space:nowrap;
}
.sup-status::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.sup-status.open{background:transparent;color:var(--accent);border-color:var(--accent-border)}
.sup-status.waiting{background:transparent;color:var(--orange);border-color:var(--orange)}
.sup-status.closed{background:transparent;color:var(--text4);border-color:var(--border-strong)}

/* ------------------------------------------------------------
   3. Thread
   ------------------------------------------------------------ */
.sup-thread-head{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--border);flex-shrink:0;
  background:var(--bg-card);
}
.sup-back{
  display:none;flex-shrink:0;
  width:32px;height:32px;border-radius:50%;
  align-items:center;justify-content:center;
  border:1px solid var(--border);background:var(--bg);color:var(--text2);
  cursor:pointer;transition:var(--transition);
}
.sup-back:hover{background:var(--bg-hover)}
.sup-thread-title{min-width:0;flex:1}
.sup-thread-title h2{
  font-size:.875rem;font-weight:600;letter-spacing:-.015em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* One line that truncates, never a line that wraps: the header has to
   keep its height whatever the subject and category are called. */
.sup-thread-sub{
  display:flex;align-items:center;gap:7px;margin-top:3px;
  font-size:.6875rem;color:var(--text4);
  flex-wrap:nowrap;overflow:hidden;white-space:nowrap;
}
.sup-thread-sub > *{flex-shrink:0}
/* The category is the one part allowed to give way, but never below a
   readable stub: squeezed to a single letter it reads as a bug. */
.sup-thread-sub #thread-category{
  flex-shrink:1;min-width:4.5em;overflow:hidden;text-overflow:ellipsis;
}
.sup-thread-sub .dot{opacity:.5}
.sup-thread-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* --- Messages --------------------------------------------------
   The transcript is the scroll container. Bubbles cap at 74% so a
   long paragraph still reads as a message rather than a page. */
.sup-messages{
  flex:1;overflow-y:auto;padding:14px 18px 12px;
  display:flex;flex-direction:column;
  background:var(--bg-subtle);
}
/* A rule across the transcript with the date set into it: quieter than
   a floating pill, and it reads as a break in time rather than a chip. */
.sup-day{
  display:flex;align-items:center;gap:12px;
  margin:8px 0 2px;
  font-size:.625rem;font-weight:600;color:var(--text4);
  letter-spacing:.08em;text-transform:uppercase;
}
.sup-day::before,.sup-day::after{
  content:'';flex:1;height:1px;background:var(--border);
}

/* Gap lives on the message, not the container, so a grouped run can
   close up while separate turns keep their air. */
.sup-msg{display:flex;gap:10px;align-items:flex-end;max-width:74%;margin-top:14px}
.sup-msg:not(.is-first){margin-top:3px}
.sup-msg.from-me{align-self:flex-end;flex-direction:row-reverse}
.sup-msg.from-agent{align-self:flex-start}
/* Holds the avatar column open for the rest of a run */
.sup-avatar-gap{width:28px;flex-shrink:0}
.sup-avatar{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-deep);color:#d7f5e7;
  font-size:.625rem;font-weight:700;
}
/* inline-block, not inline: as an inline span the background paints per
   line box and the padding only lands on the first and last line, which
   is what makes text appear to spill out of the bubble. */
.sup-bubble{
  display:inline-block;max-width:100%;
  padding:10px 14px;border-radius:18px;
  font-size:.8125rem;line-height:1.55;text-align:left;
  word-break:break-word;white-space:pre-wrap;
}
/* The tail corner points at its author, and only on the last bubble of a
   run: the ones above it square off on that side so the run reads as one
   block of speech. */
.from-agent .sup-bubble{
  background:var(--bg-card);border:1px solid var(--border);color:var(--text);
  box-shadow:0 1px 2px rgba(10,30,20,.04);
}
.from-agent.is-last .sup-bubble{border-bottom-left-radius:6px}
.from-agent:not(.is-first) .sup-bubble{border-top-left-radius:6px}

/* Your own voice is the deep brand green rather than the bright accent.
   A saturated mint block at this size shouts; the deep green carries the
   same brand and lets the text do the talking. */
.from-me .sup-bubble{
  background:var(--brand-deep);color:#eafff4;
  box-shadow:0 1px 2px rgba(10,30,20,.10);
}
.from-me.is-last .sup-bubble{border-bottom-right-radius:6px}
.from-me:not(.is-first) .sup-bubble{border-top-right-radius:6px}
[data-theme="dark"] .from-me .sup-bubble{background:#0f4a37;color:#e9fff6}
.sup-meta{
  font-size:.625rem;color:var(--text4);margin-top:5px;
  display:flex;align-items:center;gap:5px;letter-spacing:.01em;
}
.from-me .sup-meta{justify-content:flex-end}
.sup-msg-col{min-width:0;display:block}
/* Your own bubbles hug the right edge of the column */
.from-me .sup-msg-col{text-align:right}

/* --- Presence ---------------------------------------------------
   Someone joining is not a message: nobody said it. So it is a pill on
   the centre line, in the accent, carrying the agent's own avatar so
   the face that just arrived is the face on the replies that follow. */
.sup-join{
  align-self:center;display:flex;align-items:center;gap:9px;
  max-width:92%;margin-top:14px;
  padding:5px 14px 5px 5px;border-radius:999px;
  background:var(--bg-card);border:1px solid var(--border);
  color:var(--text2);font-size:.71875rem;font-weight:500;
  box-shadow:0 1px 2px rgba(10,30,20,.04);
}
.sup-join .sup-avatar{width:24px;height:24px;font-size:.5625rem}
.sup-join b{font-weight:650;color:var(--text)}
.sup-join time{color:var(--text4);font-weight:500;flex-shrink:0}
/* Only the arrival animates; a re-render of the transcript does not. */
.sup-join.is-new{animation:sup-join-in .5s cubic-bezier(.16,1,.3,1) both}
@keyframes sup-join-in{
  from{opacity:0;transform:translateY(8px) scale(.96)}
  to{opacity:1;transform:none}
}

/* Waiting for someone to pick the ticket up */
.sup-waiting{
  align-self:center;display:flex;align-items:center;gap:8px;
  font-size:.71875rem;color:var(--text4);
}
.sup-waiting .pulse{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  animation:sup-pulse 1.4s ease-in-out infinite;
}
@keyframes sup-pulse{
  0%,100%{opacity:.3;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.15)}
}
@media(prefers-reduced-motion:reduce){
  .sup-waiting .pulse{animation:none;opacity:.7}
  .sup-join.is-new{animation:none}
}

/* Who you are talking to, in the thread header */
.sup-agent-chip{display:inline-flex;align-items:center;gap:6px}
.sup-agent-chip .sup-avatar{width:20px;height:20px;font-size:.5rem}
.sup-agent-chip b{color:var(--text2);font-weight:600}
.sup-online{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-light);
}

/* Typing indicator, same shell as an agent bubble */
.sup-typing .sup-bubble{display:flex;align-items:center;gap:4px;padding:14px}
.sup-typing span{
  width:6px;height:6px;border-radius:50%;background:var(--text4);
  animation:sup-blink 1.2s ease-in-out infinite;
}
.sup-typing span:nth-child(2){animation-delay:.18s}
.sup-typing span:nth-child(3){animation-delay:.36s}
@keyframes sup-blink{0%,80%,100%{opacity:.28;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.sup-typing span{animation:none;opacity:.6}}

/* System line: opened, closed, reopened */
.sup-system{
  align-self:center;text-align:center;max-width:80%;margin-top:14px;
  font-size:.6875rem;color:var(--text4);
  padding:5px 12px;border-radius:999px;
  background:var(--bg-card);border:1px solid var(--border);
}
.sup-system i{margin-right:6px;opacity:.7}

/* --- Composer -------------------------------------------------- */
.sup-composer{
  flex-shrink:0;padding:12px 14px;
  border-top:1px solid var(--border);background:var(--bg-card);
}
.sup-composer-row{
  display:flex;align-items:flex-end;gap:9px;
  border:1px solid var(--border-strong);border-radius:var(--radius-xl);
  background:var(--bg-input);padding:7px 7px 7px 14px;
  transition:var(--transition);
}
.sup-composer-row:focus-within{
  border-color:var(--border-strong);background:var(--bg);
  box-shadow:0 1px 2px rgba(10,30,20,.05);
}
.sup-input{
  flex:1;min-width:0;resize:none;border:none;background:none;outline:none;
  font-family:inherit;font-size:.8125rem;line-height:1.5;color:var(--text);
  padding:7px 0;max-height:132px;
}
.sup-input::placeholder{color:var(--text4)}
.sup-send{
  width:36px;height:36px;flex-shrink:0;border-radius:50%;border:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-deep);color:#eafff4;font-size:.78125rem;
  cursor:pointer;transition:var(--transition);
}
[data-theme="dark"] .sup-send{background:#0f4a37;color:#e9fff6}
.sup-send:hover:not(:disabled){background:var(--accent);color:#fff}
[data-theme="dark"] .sup-send:hover:not(:disabled){color:#06231a}
/* Disabled is a flat neutral, not a faded green: a dimmed brand colour
   reads as broken rather than as waiting. */
.sup-send:disabled{background:var(--bg-hover);color:var(--text4);cursor:not-allowed}
.sup-hint{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:.625rem;color:var(--text4);margin-top:7px;padding:0 4px;
}
.sup-hint kbd{
  font-family:inherit;font-size:.625rem;font-weight:600;
  background:var(--bg-input);border:1px solid var(--border);
  border-radius:5px;padding:1px 5px;color:var(--text3);
}

/* Closed tickets keep the transcript but lose the composer */
.sup-closed-bar{
  flex-shrink:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 16px;border-top:1px solid var(--border);
  background:var(--bg-card);font-size:.78125rem;color:var(--text3);
}
.sup-closed-bar i{color:var(--text4)}
.sup-closed-bar .btn{margin-left:auto}

/* ------------------------------------------------------------
   4. Empty states
   ------------------------------------------------------------ */
/* The resting state carries the page on arrival, so it is composed
   rather than apologetic: one mark, one instruction, one action, and
   the two facts worth knowing before you write in. */
.sup-empty{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  gap:12px;padding:40px 28px;
}
.sup-empty-icon{
  width:62px;height:62px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-light);color:var(--accent);font-size:1.25rem;
  box-shadow:0 0 0 8px var(--bg-subtle);
  margin-bottom:2px;
}
[data-theme="dark"] .sup-empty-icon{box-shadow:0 0 0 8px rgba(255,255,255,.02)}
.sup-empty h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.025em}
.sup-empty p{font-size:.8125rem;color:var(--text3);max-width:340px;line-height:1.65}
.sup-empty .btn{margin-top:4px}
.sup-empty-meta{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;
  margin-top:14px;padding-top:16px;border-top:1px solid var(--border);
  width:min(340px,100%);
  font-size:.6875rem;color:var(--text4);
}
.sup-empty-meta span{display:inline-flex;align-items:center;gap:6px}
.sup-empty-meta i{opacity:.75}
.sup-list .sup-empty{padding:32px 20px}
.sup-list .sup-empty h3{font-size:.8125rem}
.sup-list .sup-empty p{font-size:.71875rem}

/* ------------------------------------------------------------
   5. New ticket dialog
   ------------------------------------------------------------ */
.sup-modal .modal{max-width:520px;padding:26px}
.sup-field{margin-bottom:16px}
.sup-field label{
  display:block;font-size:.75rem;font-weight:600;color:var(--text2);margin-bottom:6px;
}
.sup-field input,
.sup-field select,
.sup-field textarea{
  width:100%;font-family:inherit;font-size:.8125rem;color:var(--text);
  background:var(--bg-input);border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);padding:11px 14px;
  transition:var(--transition);
}
.sup-field textarea{min-height:118px;resize:vertical;line-height:1.55}
.sup-field input:focus,
.sup-field select:focus,
.sup-field textarea:focus{
  outline:none;border-color:var(--accent);background:var(--bg);
  box-shadow:0 0 0 3px var(--accent-light);
}
.sup-field .sup-error{
  display:none;font-size:.6875rem;color:var(--red);margin-top:5px;
}
.sup-field.invalid input,
.sup-field.invalid textarea{border-color:var(--red)}
.sup-field.invalid .sup-error{display:block}

/* ------------------------------------------------------------
   6. Responsive
   ------------------------------------------------------------ */
@media(max-width:1000px){
  .sup-layout{grid-template-columns:270px minmax(0,1fr)}
}

/* One screen at a time: the list, or the thread it opened. */
@media(max-width:768px){
  .sup-layout{
    grid-template-columns:1fr;height:auto;min-height:0;
  }
  .sup-pane{border-radius:16px}
  .sup-list{height:calc(100vh - var(--header-h) - 150px);min-height:380px}
  /* On a phone the resting state lives on the list screen, so the thread
     pane only ever appears once a conversation is chosen. */
  #thread-empty{display:none!important}
  .sup-thread{
    display:none;
    position:fixed;inset:0;z-index:120;
    border:none;border-radius:0;height:100dvh;
  }
  body.sup-thread-open .sup-thread{display:flex}
  /* The drawer covers the page, so the page behind it must not scroll */
  body.sup-thread-open{overflow:hidden}
  .sup-back{display:flex}
  .sup-messages{padding:16px 14px 6px}
  .sup-msg{max-width:86%}
  /* The header keeps the back arrow, the subject and the one action.
     Category, opened date and the status pill are all visible on the
     list behind it, so they step out rather than wrap the header into
     three lines. */
  .sup-thread-head{padding:12px 14px;gap:10px}
  .sup-thread-head #thread-status,
  .sup-thread-sub .dot,
  .sup-thread-sub #thread-category,
  .sup-thread-sub #thread-opened{display:none}
  .sup-thread-title h2{font-size:.9375rem}
  #close-ticket-btn{padding:0 12px}
}

@media(max-width:480px){
  .sup-msg{max-width:92%}
  .sup-bubble{font-size:.78125rem}
  .sup-modal .modal{padding:20px}
}