@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@700;800;900&display=swap');

/* =======================================================================
   THEME TOKENS
   ======================================================================= */
:root{
  --brand: #2563eb;
  --brand-600: #1e40af;
  --brand-700: #1d4ed8;
  --brand-soft: #dbeafe;
  --accent: #7c3aed;
  --accent-soft: #ede9fe;

  --bg: #f6f8fb;
  --surface: #ffffff;
  --elev-bg: #fafafa;
  --sidebar-bg: #eef3ff;
  --bot-msg-bg: #ffffff;
  --user-msg-bg: #edf4ff;

  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --shadow: 0 10px 24px rgba(15,23,42,0.08);
  --shadow-soft: 0 5px 14px rgba(15,23,42,0.08);

  --ok: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;

  --radius-lg: 16px;
  --radius-md: 12px;

  --gutter: 18px;
  --gutter-lg: 28px;

  --font-sm: 13px;
  --font-base: 14px;
  --font-lg: 22px;

  --input-h: 40px;

  /* Floating Assistant default bottom offset (safe-area aware).
     JS can override via --fab-bottom when footer is visible. */
  --fab-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

/* -------------------- Dark mode palette -------------------- */
:root[data-theme="dark"]{
  --bg: #0b1220;
  --surface: #0f172a;
  --elev-bg: #111a2e;
  --sidebar-bg: #0b152f;
  --bot-msg-bg: #101d36;
  --user-msg-bg: #152347;

  --text: #e5e7eb;
  --muted: #9aa4b2;
  --border: #1f2a44;
  --shadow: 0 10px 30px rgba(0,0,0,0.45);
  --shadow-soft: 0 5px 14px rgba(0,0,0,0.35);
}

/* =======================================================================
   BASE
   ======================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body{
  height: 100%;
  margin: 0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 20% -10%, rgba(37,99,235,.14), transparent 42%),
    radial-gradient(circle at 85% 110%, rgba(124,58,237,.12), transparent 40%),
    linear-gradient(180deg, var(--bg), var(--elev-bg));
  line-height: 1.45;
}

.container{
  max-width: 1160px;
  margin: 18px auto 48px;
  padding: 0 var(--gutter);

  /* Keep content from colliding with floating FAB on short pages */
  padding-bottom: 80px;
}

.muted{ color: var(--muted); font-size: var(--font-sm); }
.hidden{ display: none !important; }

/* Page transitions */
.fade-in{ animation: fadeIn .28s ease-out; }
.fade-out{ animation: fadeOut .28s ease-in forwards; }
@keyframes fadeIn { from{ opacity: 0 } to{ opacity: 1 } }
@keyframes fadeOut { to{ opacity: 0 } }
@keyframes floatGlow {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -6px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .fade-in, .fade-out, .typing span, .waveform .bar, .skeleton-line,
  .bot-avatar-fallback, .msg, .fab-assistant { animation: none !important; }
}

/* =======================================================================
   HEADER
   ======================================================================= */
.app-header{
  width: 100%;
  background: #b4d8ea;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-left{
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo{ height: 64px; width: auto; border-radius: 6px; }
:root[data-theme="dark"] .app-header .logo,
:root[data-theme="dark"] .gpt-brand .logo{
  background: #ffffff;
  padding: 4px 6px;
  border-radius: 8px;
}
.app-title{ margin: 0; margin:auto; font-size: 28px; font-weight: 700; color: black; letter-spacing: .2px; }
.header-right .step-label{ font-size: var(--font-sm); color: var(--muted); }

/* Bot badge (small bot in header) */
.bot-badge{
  display:flex; align-items:center; gap:8px; padding-left:8px; margin-left:8px;
  border-left:1px dashed var(--border);
}
.bot-lottie{
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #dff0ff, #edf2ff);
  display:grid; place-items:center; overflow:hidden;
}
:root[data-theme="dark"] .bot-lottie{
  background: linear-gradient(135deg, #0f1b33, #0d1430);
}

/* Theme toggle */
.theme-toggle{
  --h: 24px; --w: 48px;
  display: inline-flex; align-items: center; margin-left: 12px; cursor: pointer;
}
.theme-toggle input{ display: none; }
.toggle-slider{
  width: var(--w); height: var(--h); border-radius: 999px;
  background: var(--elev-bg); border: 1px solid var(--border); position: relative;
  display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px;
  font-size: 12px; color: var(--muted);
}
.toggle-slider::after{
  content: ""; position: absolute; top: 2px; left: 2px;
  width: calc(var(--h) - 4px); height: calc(var(--h) - 4px); border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  transition: transform .2s ease;
}
.theme-toggle input:checked + .toggle-slider::after{ transform: translateX(24px); }

/* =======================================================================
   STEPPER
   ======================================================================= */
.stepper{
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 16px;
}
.chip{
  display: inline-flex; align-items: center; padding: 8px 12px; gap: 6px;
  border: 1px solid var(--border); background: var(--surface); border-radius: 999px;
  font-size: var(--font-sm); color: var(--muted); line-height: 1;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.chip.active{ border-color: var(--brand); color: var(--brand-600); font-weight: 700; background: var(--elev-bg); }
:root[data-theme="dark"] .chip.active{ background: #122147; }
.chip:hover{ border-color: #93c5fd; transform: translateY(-1px); box-shadow: var(--shadow-soft); }

/* =======================================================================
   CARDS
   ======================================================================= */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: calc(var(--gutter) - 2px);
  margin-bottom: var(--gutter);
}

/* =======================================================================
   LAYOUT HELPERS
   ======================================================================= */
.row{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: end; }
.row > div:only-child{ grid-column: 1 / -1; }
.flex{ display: flex; gap: var(--gutter); align-items: stretch; }
.half{ flex: 1 1 50%; min-width: 280px; display: flex; flex-direction: column; }

/* =======================================================================
   FORMS
   ======================================================================= */
.label{ display: block; font-size: var(--font-sm); color: var(--muted); margin: 0 0 6px; letter-spacing: .2px; }

input[type="text"], input[type="email"], textarea, select, .input{
  width: 100%; min-height: var(--input-h); padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  font-size: var(--font-base); background: var(--surface); color: var(--text);
  outline: none; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .15s ease;
}
input[type="file"]{
  width: 100%;
  min-height: var(--input-h);
  padding: 8px 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  font-size: var(--font-base);
  background: var(--surface);
  color: var(--muted);
}
textarea{ min-height: 160px; resize: vertical; line-height: 1.45; }
input:focus, textarea:focus, select:focus, .input:focus{
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
input[type="file"]:focus{ border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.readonly{ background: #f8fafc; }
:root[data-theme="dark"] .readonly{ background: var(--elev-bg); }

/* Align button wrappers on baseline with inputs */
.row > div:has(.btn), .row > .btn-wrap{ display: flex; align-items: end; gap: 8px; }

/* =======================================================================
   BUTTONS
   ======================================================================= */
.btn{
  appearance: none; border: 1px solid transparent; border-radius: var(--radius-md);
  background: var(--brand); color: #fff; padding: 10px 14px; font-size: var(--font-base);
  font-weight: 600; cursor: pointer; transition: transform .15s ease, background .18s ease, box-shadow .18s ease;
  box-shadow: var(--shadow); min-height: var(--input-h);
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.btn:hover{ background: var(--brand-600); transform: translateY(-1px); box-shadow: 0 12px 24px rgba(37,99,235,.24); }
.btn:active{ transform: translateY(0); }
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.input:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.2);
}
.btn.secondary{ background: #fff; color: var(--brand-600); border-color: var(--brand); box-shadow: none; }
:root[data-theme="dark"] .btn.secondary{ background: var(--surface); color: var(--text); border-color: var(--border); }
.btn.ok{ background: var(--ok); }
.btn.warn{ background: var(--warn); }
.btn.danger{ background: var(--danger); }
.preset-select-btn{ background: #fff; color: var(--brand-600); border-color: var(--brand); box-shadow: none; }
.preset-select-btn.selected{ background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 8px 18px rgba(37,99,235,.2); }
.preset-select-btn.selected:hover{ background: var(--brand-600); }
.btn-row, .btn-wrap{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* =======================================================================
   KEY/VALUE GRID (Page 2 left)
   ======================================================================= */
.kv{ display: grid; grid-template-columns: 160px 1fr auto; gap: 8px 12px; align-items: center; margin-bottom: 8px; }
.kv .k{ color: var(--muted); font-size: var(--font-sm); }
.kv .v{ font-weight: 600; word-break: break-word; }

/* Call button inside kv row */
.call-btn{ padding: 7px 16px; font-size: 14px; height: auto; min-height: 34px; line-height: 1.4; border-radius: 8px; white-space: nowrap; font-weight: 600; }
.call-btn:disabled{ opacity: .4; cursor: not-allowed; }

/* Webex call confirmation modal */
.call-modal-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
.call-modal{ background: var(--surface); border-radius: var(--radius-lg); padding: 36px 32px 28px; max-width: 360px; width: 90%; text-align: left; box-shadow: 0 24px 64px rgba(0,0,0,.22); }
.call-modal-icon{ font-size: 40px; margin-bottom: 12px; }
.call-modal-title{ margin: 0 0 10px; font-size: 18px; font-weight: 700; color: var(--text); }
.call-modal-body{ color: var(--muted); font-size: var(--font-sm); line-height: 1.55; margin: 0 0 22px; }
.call-modal-body strong{ color: var(--text); }
.call-modal-actions{ display: flex; gap: 12px; justify-content: space-between; margin-top: 4px; }
.call-modal-actions #callModalConfirm{ order: -1; }
.call-modal-actions #callModalCancel{ margin-left: auto; }

/* =======================================================================
   STATUS LIST (Page 2 right)
   ======================================================================= */
.status-list{ display: grid; gap: 10px; }
.status-item{ display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); min-height: 48px; line-height: 1.25; }
.status-item{ transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; }
.status-item:hover{ transform: translateY(-1px); box-shadow: var(--shadow-soft); border-color: #93c5fd; }
.status-item input[type="checkbox"]{ width: 18px; height: 18px; flex: 0 0 18px; margin: 0; accent-color: var(--brand); transform: translateY(0.5px); }
.status-text{ display: flex; flex-direction: column; gap: 2px; }
.status-title{ font-weight: 700; margin: 0; line-height: 1.2; }
.status-desc{ line-height: 1.2; }
.status-item.down{ border-left: 4px solid var(--danger); }
.status-item.intermit{ border-left: 4px solid #fb923c; }
.status-item.maint{ border-left: 4px solid var(--warn); }
.status-item.retx{ border-left: 4px solid var(--ok); }
.status-item.other{ border-left: 4px solid #0ea5e9; }

.status-item.down input[type="checkbox"]{ accent-color: var(--danger); }
.status-item.intermit input[type="checkbox"]{ accent-color: #fb923c; }
.status-item.maint input[type="checkbox"]{ accent-color: var(--warn); }
.status-item.retx input[type="checkbox"]{ accent-color: var(--ok); }
.status-item.other input[type="checkbox"]{ accent-color: #0ea5e9; }

/* =======================================================================
   DRAFT AREA (Page 5)
   ======================================================================= */
#draft{ background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); min-height: 220px; padding: 12px; overflow: auto; }
:root[data-theme="dark"] #draft{ background: var(--surface); }
#draft:focus{ outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.15); border-color: var(--brand); }

#draft table{ table-layout: fixed; width: 100%; border-collapse: collapse; }
#draft colgroup col:first-child{ width: 38%; }
#draft colgroup col:last-child{ width: 62%; }
#draft table tr > *:first-child{ width: 38%; white-space: nowrap; }
#draft table tr > *:last-child{ width: 62%; }
#draft table tr:first-child td:last-child{ color: #dc2626; font-weight: 700; }
#draft th, #draft td{ border: 1px solid #cfd8e3; padding: 6px 8px; vertical-align: middle; }
#draft thead th{ background: #f1f5f9; font-weight: 700; }
:root[data-theme="dark"] #draft th,
:root[data-theme="dark"] #draft td{ border-color: var(--border); }
:root[data-theme="dark"] #draft thead th{ background: var(--elev-bg); }

/* =======================================================================
   TYPOGRAPHY + FOOTER
   ======================================================================= */
h3{ margin: 0 0 12px; }
section.card > *:first-child{ margin-top: 0; }
section.card > *:last-child{ margin-bottom: 0; }

/* Footer stays below FAB due to z-index */
.app-footer{
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 10px 4px;
  margin-top: 14px;
  text-align: center;
  background: var(--surface);
  border-top: 1px solid var(--border);
  font-size: var(--font-sm);
  color: var(--muted);
  border-radius: var(--radius-md);
}

/* =======================================================================
   RESPONSIVE
   ======================================================================= */
@media (max-width: 1024px){
  .container{ padding: 0 var(--gutter); }
  .row{ gap: var(--gutter); }
  .flex{ gap: var(--gutter); }
}
@media (max-width: 840px){
  .app-header{ position: sticky; }
  .header-left{ gap: 10px; }
  .app-title{ font-size: 18px; }
}
@media (max-width: 720px){
  .row{ grid-template-columns: 1fr; align-items: stretch; }
  .flex{ display: grid; grid-template-columns: 1fr; }
  .btn{ width: 100%; }
  .btn-row .btn{ width: auto; }
  .kv{ grid-template-columns: 120px 1fr auto; }
  .status-item{ align-items: flex-start; padding-top: 12px; padding-bottom: 12px; }
  .status-item input[type="checkbox"]{ margin-top: 2px; }
}

/* =======================================================================
   CHAT UI (Step 1)
   ======================================================================= */
.chat-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 560px;
}
.chat-thread {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  background: var(--elev-bg);
  height: clamp(420px, 62vh, 720px);
  overflow: auto;
}

.msg {
  display: flex;
  gap: 10px;
  margin: 10px 0;
  align-items: flex-start;
  animation: msgIn .18s ease;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  flex: 0 0 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.msg.user .avatar {
  background: var(--brand);
  color: #fff;
  border: none;
}
.msg.bot  .avatar { background: transparent; border: none; }

.msg.user {
  justify-content: flex-end;
}

.msg.user .avatar {
  order: 2;
  font-size: 16px;
  font-weight: 500;
}

.msg.user .bubble {
  order: 1;
}

.bubble {
  max-width: 86%;
  padding: 12px 14px;
  border-radius: 16px;
  line-height: 1.35;
  background: var(--bot-msg-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.msg.user .bubble {
  background: var(--user-msg-bg);
  border-color: #bfdbfe;
  margin-left: auto;
}
:root[data-theme="dark"] .msg.user .bubble{ border-color: #2f4d86; }
.msg.bot .bubble { background: var(--bot-msg-bg); }

.provider-name {
  color: var(--text);
}

:root[data-theme="dark"] .provider-name {
  color: #ffffff;
}

/* Workflow pages (Step 2-5) using chat-style content cards */
.workflow-thread{
  height: auto;
  max-height: none;
  background: transparent;
  border: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.workflow-msg{
  margin: 0;
}

.workflow-bubble{
  max-width: 100%;
  width: 100%;
}

/* Typing waveform (equalizer) */
.waveform{
  display: inline-flex; gap: 3px; align-items: flex-end; height: 16px;
}
.waveform .bar{
  width: 3px; background: #9aa4b2; border-radius: 2px;
  animation: bounce 1s infinite ease-in-out;
}
.waveform .bar:nth-child(2){ animation-delay: .1s }
.waveform .bar:nth-child(3){ animation-delay: .2s }
.waveform .bar:nth-child(4){ animation-delay: .3s }
.waveform .bar:nth-child(5){ animation-delay: .4s }
@keyframes bounce{
  0%, 100% { height: 4px; opacity:.7 }
  50% { height: 16px; opacity:1 }
}

/* Skeleton loaders */
.skeleton{ display: grid; gap: 8px; }
.skeleton-line{
  height: 10px; border-radius: 6px; background: linear-gradient(90deg, transparent, rgba(0,0,0,.05), transparent);
  background-size: 200px 100%;
  animation: shimmer 1.2s infinite linear;
}
:root[data-theme="dark"] .skeleton-line{
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}
.skeleton-line.w50{ width: 50%; }
.skeleton-line.w70{ width: 70%; }
.skeleton-line.w90{ width: 90%; }
@keyframes shimmer{
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}

/* Composer */
.composer {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
}
.composer input[type="text"] {
  height: calc(var(--input-h) + 2px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
}

/* Screen reader utility */
.sr-only {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Pulsing fallback avatar (if Lottie unavailable) */
.bot-avatar-fallback{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #cfe3ff;
  box-shadow: 0 0 0 0 rgba(37,99,235,.5);
}
.bot-avatar-fallback.is-thinking{
  background: #60a5fa;
  box-shadow: 0 0 0 0 rgba(37,99,235,.5);
  animation: pulse 1.4s infinite ease-in-out;
}
.bot-avatar-fallback.is-success{
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34,197,94,.25);
  animation: none;
}
.bot-avatar-fallback.is-error{
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(239,68,68,.25);
  animation: none;
}
@keyframes pulse{
  0%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(37,99,235,.5); }
  70%{ transform: scale(1.08); box-shadow: 0 0 0 10px rgba(37,99,235,0); }
  100%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(37,99,235,0); }
}

/* =======================================================================
   FLOATING ASSISTANT (FAB + PANEL)
   ======================================================================= */

/* FAB always above footer; bottom offset controlled by --fab-bottom.
   JS will increase this variable when the footer is in view. */
.fab-assistant{
  position: fixed;
  right: 18px;
  bottom: var(--fab-bottom);
  z-index: 9999; /* ensure it's above footer and other elements */
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--brand); color: #fff; display:grid; place-items:center;
  box-shadow: 0 10px 20px rgba(37,99,235,.35); cursor: pointer; border: 0;
  animation: floatGlow 3.2s ease-in-out infinite;
}
.fab-assistant:hover{ background: var(--brand-600); }
.fab-icon{ font-size: 24px; }

/* Assistant mini panel opens above the FAB */
.assistant-panel{
  position: fixed;
  right: 18px;
  bottom: calc(var(--fab-bottom) + 64px);
  z-index: 9999;
  width: 320px; max-width: calc(100vw - 36px);
  background: var(--surface); border:1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); padding: 12px; display: none;
  animation: msgIn .18s ease;
}
.assistant-panel.open{ display: block; }
.assistant-panel h4{ margin: 0 0 8px; }
.assistant-panel .muted{ margin-bottom: 8px; }
.assistant-panel .mini-row{
  display:grid; grid-template-columns: 1fr auto; gap:8px;
}

.floating-link-stack{
  position: fixed;
  left: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.floating-link-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--brand);
  background: var(--surface);
  color: var(--brand-600);
  text-decoration: none;
  font-size: var(--font-sm);
  font-weight: 700;
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

.floating-link-btn:hover{
  background: var(--brand);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(37,99,235,.24);
}

.floating-link-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.2);
}

/* =======================================================================
   CHATGPT-LIKE PAGE (Step 4 service.html)
   ======================================================================= */
.chatgpt-page{
  background: var(--bg);
}

.gpt-shell{
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px 1fr;
}

.gpt-sidebar{
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, var(--sidebar-bg), var(--surface));
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.08);
}

.gpt-brand{
  display: flex;
  align-items: center;
  gap: 10px;
}

.gpt-brand .logo{
  height: 42px;
  box-shadow: var(--shadow-soft);
}

.gpt-brand-title{
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0;
  width: fit-content;
  padding: 7px 14px;
  border: 1.5px solid #0d1b2a;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 2px 2px 0 #0d1b2a;
  font-family: 'Raleway', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #0d1b2a;
}

:root[data-theme="dark"] .gpt-brand-title{
  border-color: #e5e7eb;
  background: #0d1b2a;
  box-shadow: 2px 2px 0 rgba(229,231,235,.35);
  color: #e5e7eb;
}

.gpt-brand-sub{
  margin: 0;
  font-size: var(--font-sm);
  color: var(--muted);
}

.gpt-steps{
  display: grid;
  gap: 8px;
}

.gpt-steps .chip{
  width: 100%;
  justify-content: flex-start;
  border-radius: 12px;
  padding: 10px 12px;
  text-decoration: none;
}

.gpt-steps .chip.active{
  background: linear-gradient(90deg, var(--brand-soft), var(--surface));
  border-color: #93c5fd;
}

.gpt-back-btn{
  margin-top: auto;
  width: 100%;
}

.gpt-main{
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(180deg, var(--elev-bg), var(--bg));
}

.gpt-topbar{
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 4px 20px rgba(15,23,42,.05);
  backdrop-filter: blur(8px);
}

.gpt-title{
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.gpt-topbar .header-right{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.gpt-chat{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 24px 16px;
  display: grid;
  gap: 18px;
  scroll-behavior: smooth;
}

.gpt-chat::-webkit-scrollbar,
.chat-thread::-webkit-scrollbar,
#draft::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}
.gpt-chat::-webkit-scrollbar-thumb,
.chat-thread::-webkit-scrollbar-thumb,
#draft::-webkit-scrollbar-thumb{
  background: #cbd5e1;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
:root[data-theme="dark"] .gpt-chat::-webkit-scrollbar-thumb,
:root[data-theme="dark"] .chat-thread::-webkit-scrollbar-thumb,
:root[data-theme="dark"] #draft::-webkit-scrollbar-thumb{
  background: #334155;
  background-clip: content-box;
}

.gpt-chat .chat-thread{
  width: min(920px, 100%);
  margin: 0 auto;
  height: 100%;
  max-height: none;
}

.gpt-chat .msg{
  width: min(920px, 100%);
  margin: 0 auto;
}

.details-page .gpt-chat .msg{
  width: min(1200px, 100%);
}

.details-page .gpt-form-wrap .flex{
  gap: 24px;
}

.details-page .gpt-form-wrap .half:first-child{
  flex: 1 1 58%;
}

.details-page .gpt-form-wrap .half:last-child{
  flex: 1 1 42%;
}

.gpt-chat .msg + .msg{
  margin-top: 2px;
}

.gpt-bubble{
  max-width: 100%;
}

.gpt-form-wrap{
  max-width: 100%;
  width: 100%;
  background: var(--surface);
  border-radius: 16px;
}

.gpt-form-wrap h3{
  margin-top: 0;
}

.gpt-form-wrap textarea{
  min-height: 240px;
}

#otherStatusDetails{
  min-height: 120px;
  height: 120px;
}

.gpt-form-wrap .row{
  align-items: start;
}

.gpt-form-wrap .btn-wrap{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.gpt-composer{
  flex: 0 0 auto;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--brand-soft));
  padding: 12px 18px 16px;
}

.gpt-action-row{
  width: min(920px, 100%);
  margin: 0 auto;
  align-items: center;
}

.gpt-action-row .btn,
.gpt-action-row a.btn{
  min-width: 168px;
  text-decoration: none;
}

.composer{
  background: linear-gradient(180deg, var(--surface), var(--elev-bg));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  box-shadow: var(--shadow-soft);
}

.gpt-footer{
  flex: 0 0 auto;
  width: min(920px, calc(100% - 32px));
  margin: 0 auto 14px;
}

@media (max-width: 1024px){
  .gpt-shell{
    grid-template-columns: 1fr;
  }

  .gpt-sidebar{
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 12px;
  }

  .gpt-steps{
    grid-template-columns: 1fr 1fr;
  }

  .gpt-main{
    height: auto;
    min-height: calc(100vh - 170px);
  }
}

@media (max-width: 720px){
  .gpt-topbar{
    padding: 12px;
  }

  .gpt-brand-title{
    padding: 4px 9px;
    font-size: 10px;
    letter-spacing: .28em;
  }

  .gpt-chat{
    padding: 14px 10px;
  }

  .gpt-topbar .header-right .step-label{
    display: none;
  }

  .gpt-steps{
    grid-template-columns: 1fr;
  }

  .composer{
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .gpt-action-row .btn{
    width: 100%;
  }

  .gpt-action-row .btn,
  .gpt-action-row a.btn{
    justify-content: center;
    width: 100%;
  }
}

/* =======================================================================
   SAFE-AREA (iOS) & ENVIRONMENT
   ======================================================================= */
@supports (padding: max(0px)){
  body{
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
    /* top inset handled by sticky header; bottom handled in --fab-bottom */
  }
}

/* =======================================================================
   TEAMS EMAIL GROUPS
   ======================================================================= */
.group-checkbox {
  accent-color: var(--brand);
}

.group-checkbox:indeterminate {
  accent-color: var(--warn);
}

#teamsPresetEmailList input[type="checkbox"] {
  accent-color: var(--brand);
  cursor: pointer;
  width: 16px;
  height: 16px;
}

#teamsPresetEmailList label {
  user-select: none;
}

#teamsPresetEmailList label:hover {
  background-color: var(--user-msg-bg);
  padding: 2px 4px;
  border-radius: 4px;
}