/* Import distinctive fonts for legal aesthetic */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

:root{
  /* Legal luxury color palette - deep navy, warm gold, ivory */
  --bg: #f8f7f4;
  --bg-texture: linear-gradient(135deg, #f8f7f4 0%, #ebe9e4 100%);
  --card: #ffffff;
  --card-elevated: #fefefe;
  --text: #1a1a2e;
  --text-primary: #0f1419;
  --muted: #6b7280;
  --border: rgba(26, 26, 46, 0.08);
  --border-strong: rgba(26, 26, 46, 0.12);
  --shadow: 0 2px 12px rgba(26, 26, 46, 0.04), 0 8px 32px rgba(26, 26, 46, 0.06);
  --shadow-strong: 0 4px 24px rgba(26, 26, 46, 0.08), 0 16px 56px rgba(26, 26, 46, 0.10);

  /* Legal gold/amber accent - sophistication */
  --primary: #c9941d;
  --primary2: #a87817;
  --primary-soft: rgba(201, 148, 29, 0.12);

  /* Deep navy for authority */
  --accent: #1e3a5f;
  --accent2: #16304d;

  /* Danger states */
  --danger: #b91c1c;
  --danger2: #991b1b;

  /* Refined radius */
  --radius: 12px;
  --radius-lg: 16px;
  --sidebar-width: 228px;
}

*{ box-sizing: border-box; }
html,body{ height: 100%; }
body{
  margin: 0;
  /* Refined typography: DM Sans for UI, Cormorant for headings */
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Legal-inspired textured background */
  background:
    linear-gradient(180deg, rgba(201, 148, 29, 0.03) 0%, transparent 40%),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 26, 46, 0.01) 2px, rgba(26, 26, 46, 0.01) 4px),
    var(--bg-texture);
  background-attachment: fixed;
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Shell */
.appShell{
  max-width: 1440px;
  margin: 0 auto;
  padding: 6px 14px;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Top Bar */
.topBar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 20px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(20px);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03);
  position: relative;
  overflow: visible; /* must be visible so account menu dropdown isn't clipped */
}

.topBar::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity: 0.25;
}

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

.logo{
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary-soft) 0%, rgba(201, 148, 29, 0.06) 100%);
  border: 1.5px solid rgba(201, 148, 29, 0.20);
  font-size: 18px;
  box-shadow: 0 2px 8px rgba(201, 148, 29, 0.10);
  transition: transform 0.2s ease;
}

.logo:hover{
  transform: scale(1.05);
}

.brandTitle{
  /* Serif for legal gravitas */
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 20px;
  line-height: 1.1;
  color: var(--text-primary);
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brandSub{
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

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

.topBarCasesBtn {
  position: relative;
  z-index: 2;
}

.topActions .btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.topActions .btn svg{
  flex-shrink: 0;
}

.brandDetail{
  display: none;
}
body[data-active-assistant="chanelle"] .brandSub{ color: #8a6112; }
body[data-active-assistant="chanelle"] .brandDetail{ color: #334155; }
body[data-active-assistant="sofie"] .brandSub{ color: #1d4ed8; }
body[data-active-assistant="sofie"] .brandDetail{ color: #1e3a8a; }
body[data-active-assistant="mimi"] .brandSub{ color: #047857; }
body[data-active-assistant="mimi"] .brandDetail{ color: #065f46; }

/* Assistant switcher */
.assistantTabsBar{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 4px;
  margin-bottom: 2px;
}

.assistantSwitcherLabel{
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  padding: 0 2px;
}

.assistantTab{
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(255,255,255,0.85);
  border-radius: 10px;
  padding: 7px 12px;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.assistantTab:hover{
  background: rgba(255,255,255,0.98);
  border-color: rgba(148, 163, 184, 0.5);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.assistantTab.active{
  background: rgba(241, 245, 249, 0.98);
  border-color: rgba(201, 148, 29, 0.65);
  box-shadow: inset 0 0 0 1px rgba(201, 148, 29, 0.35), 0 8px 18px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}

@media (max-width: 840px){
  .assistantTabsBar{
    grid-template-columns: 1fr;
  }
}

.assistantTabName{
  font-weight: 700;
  font-size: 13px;
  color: #0f172a;
}

.assistantTabRole{
  font-size: 12px;
  color: #475569;
  line-height: 1.25;
}

.assistantAvatar{
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(0,0,0,0.18);
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}

.brandAvatar{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1.5px solid rgba(201, 148, 29, 0.25);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.brandAvatarImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: opacity 0.2s ease;
  filter: saturate(0.94) brightness(0.98);
}

.botFace{
  width: 20px;
  height: 14px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 6px;
  margin-top: 1px;
}

.botEye{
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.95;
}

.botMouth{
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.8;
}

.assistantAvatarMark{
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.7);
  background: currentColor;
}

/* Keep assistant cards light in both states; active is highlighted by gold border only. */

.iconBtn{
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.75);
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
}
.iconBtn:hover{ background: #fff; }

/* Layout */
.layout{
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: 10px;
  margin-top: 4px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.main{
  min-width: 0;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

.main > .chatCard{
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

@media (max-width: 980px){
  .assistantTabsBar{
    grid-template-columns: 1fr;
  }

  .assistantTabRole{
    display: block;
  }

  .main{
    min-height: 0;
  }
}

/* Cards - Refined material with subtle elevation */
.card{
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(254,254,254,0.90) 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 20px;
  backdrop-filter: blur(20px);
  position: relative;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover{
  box-shadow: var(--shadow-strong);
  transform: translateY(-1px);
}

.card::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover::after{
  opacity: 1;
}

.cardHeader{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.cardTitle{
  /* Serif headings for section titles */
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.3px;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.cardSub{
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* Buttons - Refined with legal gold accent */
.btn{
  border: 1.5px solid var(--border-strong);
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(254,254,254,0.90) 100%);
  color: var(--text);
  border-radius: var(--radius);
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(26, 26, 46, 0.04);
  letter-spacing: 0.3px;
  font-family: 'DM Sans', sans-serif;
}
.btn:hover{
  background: #fff;
  box-shadow: 0 2px 8px rgba(26, 26, 46, 0.08);
  transform: translateY(-1px);
}
.btn:disabled{
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

.btn.primary{
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary2) 100%);
  border-color: rgba(201, 148, 29, 0.40);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(201, 148, 29, 0.20), 0 4px 16px rgba(201, 148, 29, 0.10);
}
.btn.primary:hover{
  filter: brightness(1.05);
  box-shadow: 0 4px 12px rgba(201, 148, 29, 0.30), 0 8px 24px rgba(201, 148, 29, 0.15);
  transform: translateY(-2px);
}

.btn.ghost{
  background: rgba(255,255,255,0.70);
  backdrop-filter: blur(10px);
}

.btn.danger{
  background: linear-gradient(180deg, var(--danger), var(--danger2));
  border-color: rgba(220,38,38,0.35);
  color: #fff;
}
.btn.dangerOutline{
  border-color: rgba(220,38,38,0.35);
  color: var(--danger);
}

/* Rows */
.row{
  display: flex;
  align-items: center;
}
.gap{ gap: 10px; }
.wrap{ flex-wrap: wrap; }

/* File Button */
.fileBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.85);
  border-radius: 12px;
  padding: 9px 12px;
  cursor: pointer;
  font-weight: 650;
  font-size: 13px;
}
.fileBtn:hover{ background: #fff; }
.fileBtn input{ display: none; }

.hint{
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
.docSelect{
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.85);
}
.docDetails{
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 8px;
}

/* Docs list */
.docsList{
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.55);
  padding: 10px;
  min-height: 72px;
  max-height: 240px;
  overflow: auto;
  font-size: 12px;
  color: var(--muted);
}

.docItem{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 8px;
  border-radius: 10px;
}
.docItem:hover{
  background: rgba(2,6,23,0.04);
}
.docItem .meta{
  color: rgba(71,85,105,0.9);
  white-space: nowrap;
}
.docStatus{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}


/* Chat */
/* Flatten chatCard — remove card-like boxing for fluid workspace feel */
.chatCard{
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.chatCard::after { display: none; }
.chatCard:hover {
  box-shadow: none;
  transform: none;
}
.hidden{ display: none; }

.chatTop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.65);
}

.segmented{
  display: inline-flex;
  background: rgba(2,6,23,0.05);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 4px;
  gap: 4px;
}

.segBtn{
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 9px 12px;
  border-radius: 12px;
  font-weight: 750;
  font-size: 13px;
  cursor: pointer;
}
.segBtn.active{
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(2,6,23,0.06);
}

.linkedCaseBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 6px 18px;
  border: none;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 0;
  background: rgba(245, 243, 255, 0.5);
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 0;
}
.linkedCaseBar.hidden {
  display: none;
}

.linkedCaseBody {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.linkedCaseActions {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 2px;
  align-items: center;
  flex-shrink: 0;
}

.linkedCaseFilesBtn.hidden {
  display: none;
}

/* Case Menu Dropdown */
.caseMenuWrap {
  position: relative;
}
.linkedCaseBar .caseMenuBtn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
}
.linkedCaseBar .caseMenuBtn:hover {
  background: rgba(15, 23, 42, 0.06);
  color: #475569;
}
.caseMenu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 120;
  min-width: 160px;
  margin-top: 4px;
  padding: 4px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.caseMenuItem {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  color: #1a1a2e;
  background: none;
  border: none;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  line-height: 1.4;
}
.caseMenuItem:hover {
  background: rgba(15, 23, 42, 0.05);
}
.caseMenuItem.danger {
  color: #dc2626;
}
.caseMenuItem.danger:hover {
  background: rgba(220, 38, 38, 0.06);
}
.caseExitBtn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  background: none;
  border: none;
  cursor: pointer;
}
.caseExitBtn:hover {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
}
.caseExitBtn.hidden {
  display: none;
}

.linkedCaseLabel {
  font-size: 12.5px;
  color: #1e293b;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.linkedCaseClient {
  font-size: 11.5px;
  color: #64748b;
  line-height: 1;
  white-space: nowrap;
}
.linkedCaseClient::before {
  content: "·";
  margin-right: 6px;
  color: #cbd5e1;
}

.linkedCaseSources {
  font-size: 11.5px;
  color: #64748b;
  line-height: 1;
  white-space: nowrap;
}

.linkedCaseRenameRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.linkedCaseRenameInput {
  min-width: 220px;
  flex: 1 1 240px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font-size: 13px;
  padding: 8px 10px;
}

.linkedCaseRenameInput:focus {
  outline: none;
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

@media (max-width: 768px) {
  .linkedCaseBar {
    margin: 0;
    padding: 6px 12px;
  }

  .linkedCaseRenameInput {
    min-width: 0;
    width: 100%;
  }
}

.chatLog{
  overflow: visible;
  padding: 14px;
}

.logsPanel{
  padding: 0 14px 12px 14px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,0.65);
}
.logsActions{
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}
.logsTable{
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  font-size: 12px;
}
.logsTable table{
  width: 100%;
  border-collapse: collapse;
}
.logsTable th,
.logsTable td{
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.logsTable th:last-child,
.logsTable td:last-child{
  white-space: nowrap;
}
.activityList{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.activityRow{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.9);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.activityRow:hover{
  background: rgba(37,99,235,0.04);
  border-color: rgba(37,99,235,0.25);
}
.conversationCard{
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
  border: 1px solid rgba(148,163,184,0.25);
}
.conversationCard:hover{
  box-shadow: 0 14px 36px rgba(0,0,0,0.08);
}
.conversationCard.active{
  border-color: rgba(37,99,235,0.45);
  box-shadow: 0 16px 36px rgba(59,130,246,0.18);
}
.activityIcon{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.activityBody{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}
.activityTitle{
  font-weight: 800;
  font-size: 13px;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.activityTime{
  font-size: 11px;
  color: var(--muted);
}
.activitySub{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.activityMode{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #1d4ed8;
  background: rgba(59,130,246,0.12);
  border-radius: 999px;
  padding: 4px 8px;
  width: fit-content;
}
.activityRowActions{
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.hoverDeleteBtn{
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.hoverDeleteBtn:hover{
  background: rgba(185, 28, 28, 0.10);
  color: #b91c1c;
}
.activityRow:hover .hoverDeleteBtn,
.activityRow:focus-within .hoverDeleteBtn,
.draftCard:hover .hoverDeleteBtn,
.draftCard:focus-within .hoverDeleteBtn,
.draftItem:hover .hoverDeleteBtn,
.draftItem:focus-within .hoverDeleteBtn,
.fileDrawerRow:hover .hoverDeleteBtn,
.fileDrawerRow:focus-within .hoverDeleteBtn {
  opacity: 1;
}
.draftCardTopRow,
.draftItemTopRow{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.activityDelete{
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
  border: none;
  background: none;
  cursor: pointer;
  color: #b91c1c;
  font-size: 13px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  flex-shrink: 0;
}
.activityDelete:hover{
  background: rgba(185, 28, 28, 0.08);
}
.activityRow:hover .activityDelete{
  opacity: 1;
}
@media (max-width: 640px){
  .activityDelete{ opacity: 1; }
}
.activityDelete.disabled{
  opacity: 0.4;
  pointer-events: none;
}
.conversationActions{
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 2px;
}
.inlineRename{
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 6px;
  font-size: 13px;
  width: 100%;
}
.btn.dangerOutline.ghost{
  color: #b91c1c;
  border-color: rgba(185,28,28,0.35);
}
.emptyState{
  text-align: center;
  padding: 40px 24px;
  border: none;
  border-radius: 0;
  display: grid;
  gap: 10px;
  justify-items: center;
  color: #475569;
  background: transparent;
}
.emptyIcon{
  font-size: 28px;
}
.emptyTitle{
  font-weight: 800;
  color: #0f172a;
}

.draftsLayout{
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
  align-items: start;
}
.draftList{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.draftCard{
  background: #f7f7fa;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.draftCard:hover{
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  border-color: #d4d7dd;
}
.draftTitle{
  font-weight: 600;
  color: #111827;
}
.draftPreview{
  color: #4b5563;
  font-size: 0.95rem;
}
.draftMeta{
  display: flex;
  justify-content: space-between;
  color: #6b7280;
  font-size: 0.9rem;
}
.pill{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
}
.pill-muted{
  background: #eef2ff;
  color: #4338ca;
}
.draftActions{
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.draftActions .btn{
  padding: 6px 10px;
}
.draftViewer{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  min-height: 200px;
}
.draftViewerTitle{
  font-weight: 600;
  margin-bottom: 4px;
}
.draftViewerMeta{
  color: #6b7280;
  font-size: 0.9rem;
  margin-bottom: 10px;
}
.draftViewerContent{
  white-space: pre-wrap;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #111827;
}

.draftBubble{
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.06);
}
.draftHeader{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.draftBody{
  width: 100%;
  min-height: 220px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px;
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  color: #0f172a;
  resize: vertical;
  user-select: text;
  -webkit-user-select: text;
}
.draftActions{
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.emptySub{
  color: #64748b;
  font-size: 13px;
}
.modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.30);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
}
.modal{
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  width: min(360px, 90vw);
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.modalTitle{
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 6px;
}
.modalSub{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
}
.modalActions{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.toast{
  position: fixed;
  bottom: 16px;
  right: 16px;
  padding: 10px 14px;
  background: #0f172a;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  z-index: 9999;
  font-size: 12px;
}

.researchBlock{
  padding: 0 14px 12px 14px;
  font-size: 12px;
}

.researchHeader{
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.researchHeader .btn{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.researchControls{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 14px;
}
.card-like{
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
}
.researchStatusLines{
  margin: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.assistantRoleBoard{
  margin: 12px 14px;
}
.assistantRoleGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.assistantRoleCard{
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.92);
  padding: 10px;
}
.assistantRoleName{
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}
.assistantRoleTitle{
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin: 2px 0 8px 0;
}
.assistantRoleList{
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.4;
  color: #334155;
}
.assistantRoleList li{
  margin: 2px 0;
}
@media (max-width: 980px) {
  .assistantRoleGrid{
    grid-template-columns: 1fr;
  }
}
.statusLine{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.9);
}
.statusLabel{
  font-weight: 700;
  font-size: 13px;
}
.statusState{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,0.05);
  color: var(--muted);
}
.statusState[data-state="working"]{
  background: rgba(37,99,235,0.12);
  color: #1d4ed8;
}
.statusState[data-state="done"]{
  background: rgba(34,197,94,0.12);
  color: #0f766e;
}
.statusState[data-state="error"]{
  background: rgba(239,68,68,0.12);
  color: #b91c1c;
}
.statusDot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{
  0%{ transform: scale(0.8); opacity: 0.6; }
  50%{ transform: scale(1.15); opacity: 1; }
  100%{ transform: scale(0.8); opacity: 0.6; }
}
.statusState[data-state="done"] .statusDot,
.statusState[data-state="error"] .statusDot{
  animation: none;
}
.researchControls textarea{
  width: 100%;
  resize: vertical;
  min-height: 120px;
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 10px;
  font-size: 13px;
  background: rgba(255,255,255,0.9);
}
.inlineLabel{
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.inlineLabel select{
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 8px 10px;
  background: rgba(255,255,255,0.9);
}

.typingDots{
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.typingDots span{
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(71, 85, 105, 0.58);
  animation: blink 1.2s infinite ease-in-out;
}
.typingDots span:nth-child(2){ animation-delay: 0.2s; }
.typingDots span:nth-child(3){ animation-delay: 0.4s; }
@keyframes blink{
  0%, 80%, 100%{ opacity: 0.4; transform: translateY(0); }
  40%{ opacity: 1; transform: translateY(-2px); }
}

.pipelineSpinner{
  width: 14px;
  height: 14px;
  border: 2px solid #3b82f6;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin{
  to{ transform: rotate(360deg); }
}
.researchError{
  background: #b91c1c;
  color: #f8fafc;
  padding: 10px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px 0;
}

.statusText{
  font-size: 12px;
  color: var(--muted);
  padding: 4px 4px 0 4px;
}
.hidden{ display: none; }

.panel .chatLog{
  overflow: visible;
}

/* Messages */
.msg{
  display: flex;
  margin: 14px 0;
}
.msg.msgEnter{
  animation: messageIn 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.msg.user{ justify-content: flex-end; }
.msg.assistant{ justify-content: flex-start; }

@keyframes messageIn{
  from{
    opacity: 0;
    transform: translateY(6px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

.bubble{
  max-width: min(720px, 92%);
  white-space: pre-wrap;
  word-wrap: break-word;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.92);
  font-size: 14px;
  line-height: 1.5;
}

.msg.assistant .bubble{
  border-left: 2.5px solid var(--accent);
  border-radius: 4px 16px 16px 4px;
}

.msg.user .bubble{
  background: #faf6ee;
  border-color: rgba(201, 148, 29, 0.22);
  border-right: 2.5px solid var(--primary);
  border-radius: 16px 4px 4px 16px;
}
.modeBadge{
  align-self: flex-start;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  background: rgba(201, 148, 29, 0.10);
  color: var(--primary);
}
.modeBadge.general{ background: rgba(201, 148, 29, 0.10); color: var(--primary); }
.modeBadge.document{ background: rgba(16,185,129,0.12); color: #047857; }
.citations{
  margin-top: 8px;
  border-left: 2px solid rgba(201, 148, 29, 0.35);
  padding-left: 10px;
  background: rgba(201, 148, 29, 0.04);
  border-radius: 0 8px 8px 0;
  padding: 8px 10px;
}
.citationsTitle{
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.citationItem{
  font-size: 12px;
  margin-bottom: 6px;
}
.sourceReferenceItem.isClickable{
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(201, 148, 29, 0.16);
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.94);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.sourceReferenceItem.isClickable:hover{
  border-color: rgba(201, 148, 29, 0.28);
  background: rgba(201, 148, 29, 0.08);
  color: #3b2f1d;
  transform: translateY(-1px);
}
.sourceReferenceAction{
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: #8a6a16;
}
.citeExcerpt{
  color: var(--muted);
}

.messageAttachments{
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.groundingFooter{
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.sourceToggleBtn{
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--primary);
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sourceToggleBtn:hover{
  color: var(--accent);
}

.messageUtilityRow{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 6px;
  gap: 6px;
  opacity: 0;
  transform: translateY(2px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}

.messageIconBtn{
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(30, 58, 95, 0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.78);
  color: #5b6472;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.messageIconBtn:hover{
  background: rgba(255,255,255,0.96);
  border-color: rgba(30, 58, 95, 0.24);
  color: #1e3a5f;
  transform: translateY(-1px);
}

.messageIconBtn:focus-visible{
  outline: 2px solid rgba(30, 58, 95, 0.22);
  outline-offset: 2px;
}

.assistantRefineComposer{
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, 100%);
  margin-left: 8px;
}

.assistantRefineInput{
  width: 100%;
  min-height: 76px;
  resize: vertical;
  border: 1px solid rgba(30, 58, 95, 0.14);
  border-radius: 14px;
  padding: 10px 12px;
  font: inherit;
  color: #1f2f45;
  background: rgba(255,255,255,0.96);
}

.assistantRefineInput:focus{
  outline: none;
  border-color: rgba(30, 58, 95, 0.28);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.08);
}

.assistantRefineActions{
  display: flex;
  gap: 8px;
}

.msg.assistant:hover .messageUtilityRow,
.msg.assistant:focus-within .messageUtilityRow,
.msg.user:hover .messageUtilityRow,
.msg.user:focus-within .messageUtilityRow{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.bubble.isEditing{
  width: min(640px, 100%);
}

.messageInlineEditor{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.messageInlineEditorInput{
  width: 100%;
  min-height: 112px;
  resize: vertical;
  border: 1px solid rgba(30, 58, 95, 0.18);
  border-radius: 14px;
  background: rgba(255,255,255,0.92);
  color: var(--ink-900, #1f2937);
  padding: 12px 14px;
  font: inherit;
  line-height: 1.55;
}

.messageInlineEditorInput:focus{
  outline: 2px solid rgba(30, 58, 95, 0.18);
  border-color: rgba(30, 58, 95, 0.28);
}

.messageInlineEditorActions{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.sourceReferences{
  margin-top: 8px;
  border-left: 2px solid rgba(201, 148, 29, 0.20);
  padding: 8px 0 8px 10px;
  max-width: min(720px, 92%);
}

.attachmentCard{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(255,255,255,0.95);
  border-radius: 10px;
  padding: 8px 10px;
  max-width: 420px;
}

.attachmentIcon{
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.attachmentMeta{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.attachmentName{
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachmentType{
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.attachmentActions{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.attachmentIconBtn{
  width: 30px;
  height: 30px;
}

/* Alias names for reusable DocumentAttachmentCard semantics */
.document-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  margin-top: 10px;
  background: #fafafa;
}

.document-download-link {
  text-decoration: underline;
  font-weight: 500;
}

/* Composer */
/* Legacy composer styles - overridden by chatgptComposer */
.composer:not(.chatgptComposer){
  display: flex;
  gap: 10px;
  align-items: flex-end;
  padding: 14px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,0.65);
}

#prompt:not(.chatInput){
  width: 100%;
  resize: none;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
  outline: none;
  background: rgba(255,255,255,0.85);
}
#prompt:not(.chatInput):focus{
  border-color: rgba(37,99,235,0.35);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
}

.composerActions{
  display: flex;
  gap: 10px;
}

/* Research Indicator */
.researchIndicator {
  margin-top: 8px;
  padding: 10px 14px;
  background: rgba(59,130,246,0.08);
  border-left: 3px solid #3b82f6;
  border-radius: 8px;
  font-size: 14px;
  color: #3b82f6;
  font-weight: 500;
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ========================================
   ENHANCED LEGAL AESTHETIC ADDITIONS
   ======================================== */

/* Smooth page load animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.appShell > .topBar,
.appShell > .assistantTabsBar {
  animation: fadeInUp 0.6s ease backwards;
}

.appShell > .topBar { animation-delay: 0.1s; }
.appShell > .assistantTabsBar { animation-delay: 0.2s; }

/* Legal document texture overlay for sophistication */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 1px,
      rgba(26, 26, 46, 0.008) 1px,
      rgba(26, 26, 46, 0.008) 2px
    );
  pointer-events: none;
  z-index: 1;
}

.appShell {
  position: relative;
  z-index: 2;
}

/* Enhanced focus states for accessibility */
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Premium hover effect for interactive elements */
.card .btn:hover,
.topBar .btn:hover {
  position: relative;
}

.card .btn:hover::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(201, 148, 29, 0.1), transparent 70%);
  z-index: -1;
}

/* Refined scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(26, 26, 46, 0.02);
}

::-webkit-scrollbar-thumb {
  background: rgba(201, 148, 29, 0.20);
  border-radius: 5px;
  border: 2px solid rgba(26, 26, 46, 0.02);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 148, 29, 0.35);
}

/* Elegant selection color */
::selection {
  background: rgba(201, 148, 29, 0.25);
  color: var(--text-primary);
}


/* ========================================
   CHATGPT-STYLE UI ENHANCEMENTS
   ======================================== */

/* Header Left Section with Hamburger */
.headerLeft {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Sidebar Collapse Functionality */
.sidebar {
  transition: transform 0.3s ease, width 0.3s ease, opacity 0.3s ease;
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  max-width: var(--sidebar-width);
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar::-webkit-scrollbar {
  width: 4px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 2px;
}

.sidebar:hover::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.1);
}

.sidebar.collapsed {
  transform: translateX(-100%);
  width: 0;
  opacity: 0;
  pointer-events: none;
}

.layout {
  transition: grid-template-columns 0.3s ease;
}

.layout.sidebar-collapsed {
  grid-template-columns: 0 1fr !important;
}

/* Mobile: Sidebar closed by default */
@media (max-width: 980px){
  /* At narrow widths the sidebar is position:fixed (overlay),
     so the grid must be single-column. Override sidebar-collapsed
     which otherwise forces a 0px first column. */
  .layout,
  .layout.sidebar-collapsed {
    grid-template-columns: 1fr !important;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 80px;
    bottom: 0;
    z-index: 100;
    background: var(--card);
    box-shadow: var(--shadow-strong);
    transform: translateX(-100%);
    width: min(264px, 78vw);
    min-width: min(264px, 78vw);
    max-width: min(264px, 78vw);
  }

  .sidebar:not(.collapsed) {
    transform: translateX(0);
  }

  .chatCard {
    min-height: 65vh;
  }

  .topBar {
    padding: 6px 14px;
  }

  .brandDetail {
    display: none;
  }

  .topActions .btn {
    padding: 6px 10px;
    font-size: 12px;
  }

  .card,
  .chatCard,
  .topBar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .composerWrapper {
    position: relative;
    flex: 0 0 auto;
    z-index: 20;
    padding: 8px 12px;
    background: var(--card);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
  }

  .chatMessagesWrapper {
    padding-bottom: 16px;
    min-height: 0;
  }
}

/* History Drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  pointer-events: none;
}

.drawer.open {
  visibility: visible;
  pointer-events: auto;
}

.drawerOverlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.22);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.drawer.open .drawerOverlay {
  opacity: 1;
}

.drawerContent {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: 92vw;
  background: linear-gradient(180deg, #faf9f7 0%, #f5f3ef 100%);
  box-shadow: -8px 0 40px rgba(15, 23, 42, 0.10), -2px 0 8px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  opacity: 0.6;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  border-left: 1px solid rgba(15, 23, 42, 0.06);
  pointer-events: auto;
}

.drawer.open .drawerContent {
  transform: translateX(0);
  opacity: 1;
}

.drawerHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(250,249,247,0.9) 100%);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.drawerHeader .cardTitle {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.drawerActions {
  padding: 10px 24px;
  display: flex;
  gap: 8px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.4);
}

.historyList {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.historyList:hover {
  scrollbar-color: rgba(15, 23, 42, 0.1) transparent;
}

.historyList::-webkit-scrollbar {
  width: 5px;
}

.historyList::-webkit-scrollbar-track {
  background: transparent;
}

.historyList::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
}

.historyList:hover::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.1);
}

/* ==========================================
   Files Drawer
   ========================================== */
.filesDrawerContent {
  display: flex;
  flex-direction: column;
}
.filesDrawerBody {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.filesDrawerBody:hover {
  scrollbar-color: rgba(15, 23, 42, 0.1) transparent;
}
.filesDrawerSection {
  margin-bottom: 20px;
}
.filesDrawerSectionHeader {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.filesDrawerList {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.filesDrawerCases {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.filesDrawerCaseGroup {
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 10px;
  overflow: hidden;
}
.filesDrawerCaseTitle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  background: rgba(15, 23, 42, 0.02);
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  cursor: pointer;
}
.filesDrawerCaseTitle:hover {
  background: rgba(15, 23, 42, 0.04);
}
.filesDrawerCaseTitle svg {
  flex-shrink: 0;
  color: #94a3b8;
  transition: transform 0.2s;
}
.filesDrawerCaseTitle.expanded svg {
  transform: rotate(90deg);
}
.filesDrawerCaseFiles {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.fileDrawerRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 13px;
  color: #1e293b;
  border-radius: 6px;
  cursor: default;
  position: relative;
}
.fileDrawerRow:hover {
  background: rgba(15, 23, 42, 0.03);
}
.fileDrawerRowIcon {
  flex-shrink: 0;
  color: #94a3b8;
}
.fileDrawerRowName {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fileDrawerRowSize {
  font-size: 11px;
  color: #94a3b8;
  flex-shrink: 0;
}
.fileDrawerRowMenu {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.fileDrawerRow:hover .fileDrawerRowMenu {
  opacity: 1;
}
.fileDrawerMenuBtn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: 4px;
  cursor: pointer;
  color: #64748b;
}
.fileDrawerMenuBtn:hover {
  background: rgba(15, 23, 42, 0.08);
}
.fileDrawerDropdown {
  position: absolute;
  top: 100%;
  right: 8px;
  z-index: 200;
  min-width: 140px;
  padding: 4px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
}
.fileDrawerDropdownItem {
  display: block;
  width: 100%;
  padding: 6px 10px;
  font-size: 12px;
  color: #1e293b;
  background: none;
  border: none;
  border-radius: 5px;
  text-align: left;
  cursor: pointer;
}
.fileDrawerDropdownItem:hover {
  background: rgba(15, 23, 42, 0.05);
}
.fileDrawerDropdownItem.danger {
  color: #dc2626;
}
.fileDrawerDropdownItem.danger:hover {
  background: rgba(220, 38, 38, 0.06);
}

/* Storage Footer */
.filesDrawerFooter {
  padding: 14px 20px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  flex-shrink: 0;
}
.storageBar {
  height: 4px;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}
.storageBarFill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.storageLabel {
  font-size: 11px;
  color: #64748b;
}

.historySection + .historySection {
  margin-top: 20px;
}

.historySectionHeader {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.historySectionList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.historySectionEmpty {
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px dashed var(--border);
  color: var(--muted);
  font-size: 13px;
}

.historyLoadError {
  display: grid;
  gap: 10px;
}

.historyLoadErrorTitle {
  color: var(--text-primary);
  font-weight: 600;
}

.historyLoadErrorBody {
  color: var(--muted);
}

.historyRetryBtn {
  justify-self: start;
}

.historyCaseGroups {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.historyCaseGroup {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  background: rgba(255, 255, 255, 0.62);
}

.historyCaseGroupTitle {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.historyCaseGroupMeta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  margin-bottom: 10px;
}

.historyItem {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.historyItem:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(201, 148, 29, 0.35);
  box-shadow: 0 4px 16px rgba(201, 148, 29, 0.10), 0 1px 3px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

.historyItemContent {
  min-width: 0;
  flex: 1;
}

.historyItemTitle {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.historyItemMeta {
  font-size: 12px;
  color: var(--muted);
}

.historyLabels,
.chatItemLabels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.historyLabelChip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(148, 163, 184, 0.12);
  color: #334155;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.historyItemActions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.historyItemPin,
.historyItemDelete {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.historyItemPin {
  width: auto;
  padding: 0 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(148, 163, 184, 0.10);
  opacity: 0;
  font-weight: 600;
}

.historyItemDelete {
  font-size: 15px;
}

.historyItem:hover .historyItemPin,
.historyItem:hover .historyItemDelete,
.historyItem:focus-within .historyItemPin,
.historyItem:focus-within .historyItemDelete {
  opacity: 1;
}

.historyItemPin:hover {
  background: rgba(201, 148, 29, 0.14);
  color: var(--accent);
}

.historyItemDelete:hover {
  background: rgba(185, 28, 28, 0.10);
  color: var(--danger);
}

@media (hover: none), (pointer: coarse) {
  .historyItemPin,
  .historyItemDelete,
  .hoverDeleteBtn,
  .chatItemMore {
    opacity: 0.72;
  }
}

/* Source Indicator (From My Docs mode) */
.sourceIndicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(201, 148, 29, 0.08);
  border: 1px solid rgba(201, 148, 29, 0.20);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 12px;
  font-weight: 500;
}

.sourceIndicator svg {
  color: var(--primary);
}

/* Drafting Layout: Chat + Drafts Panel */
.draftingLayout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  height: 100%;
}

@media (max-width: 980px){
  .draftingLayout {
    grid-template-columns: 1fr;
  }

  .draftsPanel {
    position: fixed;
    right: 0;
    top: 80px;
    bottom: 0;
    width: 320px;
    max-width: 90vw;
    z-index: 100;
    box-shadow: var(--shadow-strong);
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  .draftsPanel:not(.collapsed) {
    transform: translateX(0);
  }

  .drawerHeader,
  .drawerActions {
    padding-left: 20px;
    padding-right: 20px;
  }

  .draftsList {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 480px){
  .drawerHeader,
  .drawerActions,
  .draftsList {
    padding-left: 16px;
    padding-right: 16px;
  }

}

.draftingChat {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

/* Drafts Panel */
.draftsPanel {
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(254,254,254,0.90) 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

.draftsPanel.collapsed {
  transform: translateX(calc(100% + 16px));
}

.draftsPanelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.draftsPanelContent {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

.draftList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.draftItem {
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(255,255,255,0.60);
}

.draftItemTopRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.draftItemDelete {
  flex-shrink: 0;
}

.draftItem:hover {
  background: rgba(255,255,255,0.95);
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(201, 148, 29, 0.12);
}

.draftItemTitle {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.draftItemStatus {
  font-size: 12px;
  color: var(--muted);
  display: inline-block;
  padding: 2px 8px;
  background: rgba(201, 148, 29, 0.12);
  border-radius: 4px;
  margin-top: 4px;
}

.draftItemStatus.approved {
  background: rgba(34, 197, 94, 0.12);
  color: #059669;
}

.draftItemStatus.rejected {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

/* Draft Viewer Modal */
.draftViewer {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgba(26, 26, 46, 0.40);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn 0.2s ease;
}

.draftViewer > * {
  max-width: 800px;
  width: 100%;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-strong);
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.draftViewerHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  border-bottom: 1px solid var(--border);
}

.draftViewerMeta {
  padding: 16px 24px;
  font-size: 14px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.draftViewerContent {
  padding: 24px;
  white-space: pre-wrap;
  font-family: 'DM Sans', monospace;
  font-size: 14px;
  line-height: 1.6;
  max-height: 500px;
  overflow-y: auto;
}

.draftActions {
  padding: 16px 24px;
  display: flex;
  gap: 12px;
  border-top: 1px solid var(--border);
}

/* Icon Button Enhancements */
.iconBtn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.iconBtn svg {
  display: block;
}

/* Full-width button utility */
.btn.full {
  width: 100%;
}


/* Panel visibility defaults */
.panel {
  display: block;
}

.panel.hidden {
  display: none !important;
}


/* Draft Viewer Inner Container Fix */
.draftViewerInner {
  max-width: 800px;
  width: 100%;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-strong);
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease;
}

/* Drafts List in Drawer */
.draftsList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 24px 24px;
}


/* Force hide drawers and modals by default */
.drawer {
  visibility: hidden;
  pointer-events: none;
}

.drawer.open {
  visibility: visible !important;
  pointer-events: auto !important;
}

.draftViewer.hidden {
  display: none !important;
}

.modal-backdrop.hidden {
  display: none !important;
}


/* Ensure chat panel is visible by default */
.panel {
  display: block !important;
}

.panel.hidden {
  display: none !important;
}

/* Chat log — no scroll, wrapper handles it */
.chatLog {
  overflow: visible;
}

/* Composer should always be visible */
.composer {
  display: block;
}

/* Force chat panel to be visible by default (very specific rule) */
#panelChat {
  display: block !important;
}

#panelChat.hidden {
  display: none !important;
}

/* Shared chat panel should be visible */
#sharedChatPanel {
  display: block !important;
  width: 100%;
  height: 100%;
}

/* ========================================
   MINIMAL PREMIUM UI REFACTOR
   ======================================== */

/* ========== Sidebar: Minimal Chat List ========== */

.newChatBtn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border: 1.5px solid rgba(201, 148, 29, 0.35);
  border-radius: var(--radius);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.2px;
}

.newChatBtn:hover {
  background: rgba(201, 148, 29, 0.08);
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(201, 148, 29, 0.12);
  transform: translateY(-1px);
}

.newChatBtn svg {
  flex-shrink: 0;
}

.sidebarTopActions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.sidebarTopActions .newChatBtn {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.sidebarSelectToggle {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  min-width: unset;
  padding: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  border-radius: 8px;
  border: 1px solid transparent;
  color: var(--text-tertiary, #94a3b8);
  background: transparent;
  opacity: 0.55;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.sidebarSelectToggle:hover {
  opacity: 1;
  background: var(--bg-hover, rgba(148,163,184,0.08));
  color: var(--text-secondary, #64748b);
  border-color: var(--border-secondary, rgba(148,163,184,0.15));
}

/* Chat Sections */
.chatSections {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.sidebarGroupLabel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  padding: 2px 4px 0;
}

.chatSection {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chatSection.collapsed .chatList {
  display: none;
}

.chatSectionHeader {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  padding: 8px 12px 4px;
}

.chatSectionHeader.expandable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.chatSectionHeader.expandable:hover {
  background: rgba(0, 0, 0, 0.02);
}

.chatSectionHeader .expandIcon {
  transition: transform 0.2s ease;
}

.chatSection.collapsed .expandIcon {
  transform: rotate(-90deg);
}

.chatList {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chatTimeGroup {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chatTimeGroup + .chatTimeGroup {
  margin-top: 10px;
}

.chatTimeGroupHeader {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  padding: 6px 12px 2px;
  user-select: none;
}

.chatHistoryEmptyState {
  padding: 20px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.caseDrawerSection {
  margin-bottom: 18px;
}

.caseList {
  gap: 6px;
}

.caseListEmpty {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 13px;
}

.caseListItem {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.caseListItem:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(201, 148, 29, 0.24);
  box-shadow: 0 2px 8px rgba(201, 148, 29, 0.08);
}

.caseListItem.active {
  border-color: rgba(201, 148, 29, 0.36);
  background: rgba(201, 148, 29, 0.08);
}

.caseListItemTitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}

.caseListItemMeta {
  font-size: 11px;
  color: var(--muted);
}

.caseDrawerItem {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.caseDrawerItem .caseListItem {
  flex: 1;
}

.caseDrawerItemControls {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.caseMenuBtn {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  color: #475569;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.caseDrawerDeleteBtn {
  flex-shrink: 0;
}

.caseDrawerItem:hover .caseMenuBtn,
.caseDrawerItem:focus-within .caseMenuBtn,
.caseDrawerItem:hover .caseDrawerDeleteBtn,
.caseDrawerItem:focus-within .caseDrawerDeleteBtn {
  opacity: 1;
}

.caseMenu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 132px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow);
  z-index: 12;
}
.caseMenu.hidden {
  display: none;
}

.caseMenuItem {
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}

.caseMenuItem:hover {
  background: rgba(15, 23, 42, 0.06);
}

.caseMenuItem.danger {
  color: var(--danger);
}

.caseDrawerItem--renaming {
  padding: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.caseRenameInlineInput {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  padding: 10px 12px;
  font-size: 13px;
}

.caseRenameInlineActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.drawerActions--cases {
  align-items: center;
}

.drawerInput {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--text);
  padding: 10px 12px;
  font-size: 13px;
}

.drawerInput:focus {
  outline: none;
  border-color: rgba(201, 148, 29, 0.42);
  box-shadow: 0 0 0 3px rgba(201, 148, 29, 0.12);
}

.casesDrawerList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Chat Item */
.chatItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
  position: relative;
  font-size: 13px;
  color: var(--text);
}

.chatItem:hover {
  background: rgba(0, 0, 0, 0.03);
}

.chatItem.active {
  background: rgba(201, 148, 29, 0.06);
  color: var(--text);
  font-weight: 500;
  border-left: 3px solid var(--primary);
  padding-left: 9px;
}

.chatItemContent {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chatItemTitle {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chatItemPreview {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chatItemMore {
  opacity: 0;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
  color: var(--muted);
}

.chatItem > .hoverDeleteBtn {
  flex-shrink: 0;
  opacity: 0.56;
}

.chatItem:hover .chatItemMore,
.chatItem.showActions .chatItemMore,
.chatItem:hover > .hoverDeleteBtn,
.chatItem:focus-within > .hoverDeleteBtn {
  opacity: 1;
}

.caseDrawerItem:hover .hoverDeleteBtn,
.caseDrawerItem:focus-within .hoverDeleteBtn {
  opacity: 1;
}

.caseInlineDeleteBtn,
.fileDrawerInlineDeleteBtn {
  flex-shrink: 0;
}

.chatItemActions {
  display: none;
  gap: 4px;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 10;
}

.chatItem.showActions .chatItemActions {
  display: flex;
}

.chatItem:hover .chatItemActions {
  display: none;
}

.chatItem.showActions:hover .chatItemActions {
  display: flex;
}

.chatItemBtn {
  padding: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  display: grid;
  place-items: center;
  transition: background 0.15s ease;
}

.chatItemBtn:hover {
  background: rgba(0, 0, 0, 0.08);
}

.chatItemBtn.deleteBtn:hover {
  background: rgba(185, 28, 28, 0.12);
  color: #b91c1c;
}

.chatItemBtn svg {
  width: 14px;
  height: 14px;
}

/* Settings Sections (Collapsed by default) */
.settingsSections {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.settingsSection {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settingsSection.collapsed .settingsSectionContent {
  display: none;
}

.settingsSectionHeader {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.settingsSectionHeader:hover {
  background: rgba(0, 0, 0, 0.02);
}

.settingsSectionHeader .expandIcon {
  transition: transform 0.2s ease;
}

.settingsSection.collapsed .expandIcon {
  transform: rotate(-90deg);
}

.settingsSectionContent {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 12px 8px;
}

.settingsSub {
  font-size: 12px;
  color: var(--muted);
}

/* Small Buttons */
.btn.small {
  padding: 6px 12px;
  font-size: 12px;
}

/* ========== Mode Dropdown (Top Bar) ========== */

.modeDropdown {
  position: relative;
}

.modeDropdownBtn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
}

.modeDropdownBtn:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.modeDropdownBtn svg {
  transition: transform 0.2s ease;
}

.modeDropdown.open .modeDropdownBtn svg {
  transform: rotate(180deg);
}

.modeDropdownMenu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-strong);
  padding: 4px;
  z-index: 1000;
  animation: fadeIn 0.15s ease;
}

.modeDropdownMenu.hidden {
  display: none;
}

.modeDropdownItem {
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.modeDropdownItem:hover {
  background: rgba(0, 0, 0, 0.04);
}

.modeDropdownItem.active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 500;
}

/* ========== Chat Top (Minimal) ========== */

.chatTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 12px;
  border-bottom: none;
  background: transparent;
}

.chatPanelHeader {
  min-height: 0;
  height: 0;
  overflow: visible;
  position: relative;
  z-index: 5;
}

.chatPanelHeaderLeft {
  display: none;
}

.chatPanelHeaderActions {
  display: none !important; /* Switch button moved to account menu */
}

.chatResetBtn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.44);
  color: rgba(71, 85, 105, 0.78);
  transition: background-color 140ms ease, color 140ms ease, opacity 140ms ease, border-color 140ms ease;
  opacity: 0.82;
}

.chatResetBtn:hover {
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.12);
  opacity: 1;
}

.activeOutputModeChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #f8fafc;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  color: #334155;
  font-weight: 600;
}

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

.chatTopRight {
  display: flex;
  align-items: center;
  gap: 8px;
}

.currentModeIndicator {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

/* ========== Premium Modals ========== */

.modal.premiumModal {
  max-width: 480px;
  width: 90%;
  padding: 0;
  overflow: hidden;
}

.modalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.modalHeader .modalTitle {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.3px;
}

.modalModeOptions {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px;
}

.modeOption {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.15s ease;
}

.modeOption:hover {
  background: var(--primary-soft);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(201, 148, 29, 0.10);
}

.modeOption {
  transition: background 0.15s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.modeOption svg {
  flex-shrink: 0;
  color: var(--primary);
}

.modeOptionContent {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modeOptionTitle {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.modeOptionDesc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* Compact Modal (Chat Lifecycle) */
.modal.compactModal {
  max-width: 360px;
  width: 90%;
  padding: 20px;
}

.modal.compactModal .modalTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
}

.modalActions.horizontal {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.modalActions.horizontal .btn {
  flex: 1;
  padding: 10px 16px;
  font-size: 13px;
}

/* ============================================
   Premium Upload Destination Modal
   ============================================ */
.uploadDestBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 9998;
  animation: uploadDestFadeIn 0.18s ease-out;
}

.uploadDestBackdrop.hidden {
  display: none !important;
}

@keyframes uploadDestFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.uploadDestCard {
  width: min(100%, 440px);
  background: #ffffff;
  border-radius: 22px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 32px 64px rgba(15, 23, 42, 0.18),
    0 8px 20px rgba(15, 23, 42, 0.08),
    0 0 0 0.5px rgba(255, 255, 255, 0.9) inset;
  overflow: hidden;
  animation: uploadDestSlideUp 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes uploadDestSlideUp {
  from { transform: translateY(16px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Amber accent bar at top */
.uploadDestCard::before {
  content: '';
  display: block;
  height: 2.5px;
  background: linear-gradient(90deg, #c9941d 0%, rgba(201, 148, 29, 0.2) 70%, transparent 100%);
}

/* Header */
.uploadDestHeader {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

.uploadDestIcon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, rgba(201, 148, 29, 0.12) 0%, rgba(201, 148, 29, 0.06) 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c9941d;
  border: 1px solid rgba(201, 148, 29, 0.15);
}

.uploadDestHeaderText {
  flex: 1;
  min-width: 0;
}

.uploadDestTitle {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  margin-bottom: 3px;
}

.uploadDestSub {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.5;
}

/* Options list */
.uploadDestOptions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 8px;
}

/* Option card base */
.uploadDestOption {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.7);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s, box-shadow 0.15s;
}

.uploadDestOption:hover {
  border-color: rgba(201, 148, 29, 0.28);
  background: rgba(254, 252, 245, 0.9);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(201, 148, 29, 0.10);
}

.uploadDestOption:active {
  transform: translateY(0);
}

/* Primary (active case) variant */
.uploadDestOption--primary {
  background: linear-gradient(135deg, rgba(201, 148, 29, 0.08) 0%, rgba(201, 148, 29, 0.04) 100%);
  border-color: rgba(201, 148, 29, 0.22);
}

.uploadDestOption--primary:hover {
  background: linear-gradient(135deg, rgba(201, 148, 29, 0.14) 0%, rgba(201, 148, 29, 0.07) 100%);
  border-color: rgba(201, 148, 29, 0.38);
}

.uploadDestOption.hidden {
  display: none !important;
}

/* Option icon */
.uploadDestOptionIcon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(15, 23, 42, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  transition: color 0.15s, background 0.15s;
}

.uploadDestOption--primary .uploadDestOptionIcon {
  color: #c9941d;
  background: rgba(201, 148, 29, 0.1);
  border-color: rgba(201, 148, 29, 0.18);
}

.uploadDestOption:hover .uploadDestOptionIcon {
  color: #c9941d;
}

/* Option text */
.uploadDestOptionText {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.uploadDestOptionTitle {
  font-size: 13.5px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.3;
}

.uploadDestOptionDesc {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.4;
}

/* Active badge */
.uploadDestOptionBadge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #c9941d;
  background: rgba(201, 148, 29, 0.10);
  border: 1px solid rgba(201, 148, 29, 0.20);
  border-radius: 999px;
  padding: 2px 8px;
}

/* Picker card (select existing case) */
.uploadDestPickerWrap {
  display: flex;
  flex-direction: column;
}

.uploadDestPickerWrap.hidden {
  display: none !important;
}

.uploadDestOption--picker {
  cursor: default;
}

.uploadDestOption--picker:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(201, 148, 29, 0.18);
  background: rgba(254, 252, 245, 0.7);
}

.uploadDestCaseSelect {
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 8px;
  padding: 6px 10px;
  background: #ffffff;
  color: #0f172a;
  font: inherit;
  font-size: 12.5px;
  appearance: auto;
  cursor: pointer;
  margin-top: 4px;
  outline: none;
  transition: border-color 0.15s;
}

.uploadDestCaseSelect:focus {
  border-color: rgba(201, 148, 29, 0.4);
  box-shadow: 0 0 0 2px rgba(201, 148, 29, 0.08);
}

.uploadDestCaseSelect:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.uploadDestPickerBtn {
  flex-shrink: 0;
  padding: 7px 14px;
  border: none;
  border-radius: 9px;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  white-space: nowrap;
  align-self: flex-end;
}

.uploadDestPickerBtn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.uploadDestPickerBtn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Dismiss link */
.uploadDestDismiss {
  display: block;
  width: 100%;
  padding: 12px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: color 0.15s;
  border-top: 1px solid rgba(15, 23, 42, 0.05);
  margin-top: 2px;
}

.uploadDestDismiss:hover {
  color: #475569;
}

/* ========== Responsive Adjustments ========== */

@media (max-width: 980px) {
  .settingsSections {
    display: none;
  }

  .newChatBtn {
    font-size: 13px;
    padding: 10px 14px;
  }
}

/* ========================================
   UNIFIED CONVERSATIONAL INTERFACE
   ======================================== */

/* Inline System Status Indicators (Sophie/Mimi) */
.systemStatus {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin: 8px 0;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.04);
  border-left: 2px solid rgba(59, 130, 246, 0.3);
  font-size: 13px;
  color: rgba(59, 130, 246, 0.9);
  font-weight: 500;
  animation: fadeIn 0.3s ease;
}

.systemStatus.research {
  background: rgba(147, 51, 234, 0.04);
  border-left-color: rgba(147, 51, 234, 0.3);
  color: rgba(147, 51, 234, 0.9);
}

.systemStatus.handoff,
.systemStatus.pipeline {
  background: rgba(15, 23, 42, 0.04);
  border-left-color: rgba(15, 23, 42, 0.18);
  color: #334155;
}

.systemStatus.validation {
  background: rgba(16, 185, 129, 0.04);
  border-left-color: rgba(16, 185, 129, 0.3);
  color: rgba(16, 185, 129, 0.9);
}

.systemStatus .statusIcon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  animation: spin 2s linear infinite;
}

.systemStatus .statusText {
  flex: 1;
}

.systemStatus .statusMeta {
  font-size: 11px;
  color: #64748b;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.systemStatus .agentName {
  font-weight: 600;
}

.agentPresenceChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 12px;
  line-height: 1.2;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.agentPresenceIcon {
  font-size: 13px;
  line-height: 1;
}

.agentPresenceLabel {
  font-weight: 700;
  color: #0f172a;
}

.agentPresenceDivider {
  color: #94a3b8;
}

.agentPresenceStatus {
  color: #475569;
  font-weight: 500;
}

.collaborationFlowCard {
  display: grid;
  gap: 14px;
  margin: 10px 0 14px;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(120, 93, 58, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(248, 241, 232, 0.98)),
    radial-gradient(circle at top right, rgba(183, 131, 47, 0.08), transparent 36%);
  box-shadow: 0 14px 34px rgba(31, 41, 55, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

.collaborationFlowCard.isPending {
  border-color: rgba(173, 125, 45, 0.22);
  box-shadow: 0 18px 38px rgba(31, 41, 55, 0.11);
}

.collaborationFlowCard.isFailed {
  border-color: rgba(185, 28, 28, 0.18);
  box-shadow: 0 14px 34px rgba(127, 29, 29, 0.08);
}

.collaborationFlowCard.isStreaming {
  transform: translateY(-1px);
}

.collaborationFlowHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.collaborationFlowEyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b6d45;
}

.collaborationFlowTitle {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: #201a15;
}

.collaborationFlowPill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(140, 109, 63, 0.1);
  color: #6e5534;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.collaborationFlowSummary {
  font-size: 13px;
  line-height: 1.5;
  color: #5b4a38;
}

.collaborationParticipants {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.collaborationParticipant {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(120, 93, 58, 0.1);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  animation: collaborationStepIn 180ms ease;
}

.collaborationParticipant.status-running,
.collaborationParticipant.status-finalizing,
.collaborationParticipant.status-handoff {
  border-color: rgba(176, 127, 47, 0.24);
  box-shadow: 0 10px 20px rgba(173, 125, 45, 0.08);
}

.collaborationParticipant.status-completed {
  border-color: rgba(56, 120, 92, 0.18);
  background: rgba(247, 252, 249, 0.9);
}

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

.collaborationParticipantIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(112, 86, 53, 0.1);
  color: #453320;
  font-size: 14px;
  font-weight: 800;
  flex: 0 0 34px;
}

.collaborationParticipantName {
  font-size: 14px;
  font-weight: 700;
  color: #231d17;
}

.collaborationParticipantStatus {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a6e4c;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.collaborationParticipantMessage {
  font-size: 12.5px;
  line-height: 1.5;
  color: #5a4636;
}

.collaborationTimeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.collaborationTimelineItem {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 10px;
  animation: collaborationStepIn 180ms ease;
}

.collaborationTimelineMarker {
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 999px;
  background: rgba(142, 109, 71, 0.38);
  box-shadow: 0 0 0 4px rgba(142, 109, 71, 0.08);
}

.collaborationTimelineItem.status-running .collaborationTimelineMarker,
.collaborationTimelineItem.status-finalizing .collaborationTimelineMarker,
.collaborationTimelineItem.status-handoff .collaborationTimelineMarker {
  background: #b7802f;
}

.collaborationTimelineItem.status-completed .collaborationTimelineMarker {
  background: #2f8a64;
}

.collaborationTimelineItem.status-failed .collaborationTimelineMarker {
  background: #b91c1c;
}

.collaborationTimelineBody {
  display: grid;
  gap: 4px;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(120, 93, 58, 0.08);
}

.collaborationTimelineItem:last-child .collaborationTimelineBody {
  padding-bottom: 0;
  border-bottom: none;
}

.collaborationTimelineTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.collaborationTimelineAgent {
  font-size: 12px;
  font-weight: 700;
  color: #2b241d;
}

.collaborationTimelineBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(129, 102, 68, 0.08);
  color: #6b563d;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.collaborationTimelineMessage {
  font-size: 12.5px;
  line-height: 1.5;
  color: #5f4e40;
}

.collaborationStatusSpinner {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1.5px solid rgba(183, 128, 47, 0.18);
  border-top-color: #b7802f;
  border-right-color: rgba(183, 128, 47, 0.42);
  flex: 0 0 10px;
  animation: spin 0.9s linear infinite;
}

@keyframes collaborationStepIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Hide mode-specific UI elements */
.modeDropdown,
.modeDropdownMenu,
.currentModeIndicator,
.sourceIndicator,
.segmented {
  display: none !important;
}

/* Clean ChatGPT-style chat area */
.chatCard {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

#sharedChatPanel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.chatLog {
  flex: 0 0 auto;
  overflow: visible;
  padding: 20px;
}

.composer {
  flex-shrink: 0;
}

/* ========================================
   ATTACHMENTS DRAWER & CHAT-SCOPED FILES
   ======================================== */

/* Attachments Drawer */
.attachmentsDrawerContent {
  width: 420px;
  max-width: 90vw;
}

.attachmentSection {
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.attachmentSection:last-child {
  border-bottom: none;
}

.attachmentSectionTitle {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 12px;
}

/* Connection Card */
.connectionCard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}

.connectionInfo {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.connectionInfo svg {
  flex-shrink: 0;
  color: var(--primary);
}

.connectionText {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.connectionLabel {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.connectionStatus {
  font-size: 11px;
  color: var(--muted);
}

/* Upload Area */
.uploadArea {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn.fullWidth {
  width: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Files List */
.filesList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.emptyFilesState {
  padding: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.fileItem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  transition: border-color 0.15s ease;
  position: relative;
}

.fileItem:hover {
  border-color: var(--primary);
}

.fileIcon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 18px;
}

.fileInfo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fileName {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fileMetadata {
  font-size: 11px;
  color: var(--muted);
}

.fileActions {
  display: none;
  align-items: center;
  gap: 4px;
}

.fileItem:hover .fileActions {
  display: flex;
}

.fileActionBtn {
  padding: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  display: grid;
  place-items: center;
  transition: background 0.15s ease;
  position: relative;
}

.fileActionBtn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.fileActionBtn svg {
  width: 16px;
  height: 16px;
}

/* File Action Menu (Dropdown) */
.fileActionMenu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-strong);
  padding: 4px;
  z-index: 1000;
  display: none;
}

.fileActionMenu.open {
  display: block;
  animation: fadeIn 0.15s ease;
}

.fileActionMenuItem {
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}

.fileActionMenuItem:hover {
  background: rgba(0, 0, 0, 0.04);
}

.fileActionMenuItem.danger {
  color: var(--danger);
}

.fileActionMenuItem.danger:hover {
  background: rgba(185, 28, 28, 0.06);
}

.fileActionMenuItem svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.fileActionMenuItem .actionLabel {
  flex: 1;
}

.fileActionMenuItem .actionDesc {
  font-size: 11px;
  color: var(--muted);
  display: block;
  margin-top: 2px;
}

/* File Badge */
.fileBadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.fileBadge.global {
  background: rgba(147, 51, 234, 0.1);
  color: #7c3aed;
}

.fileBadge.chat {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}

/* Responsive */
@media (max-width: 980px) {
  .attachmentsDrawerContent {
    max-width: 100%;
    width: 100%;
  }
}

/* ======================================================
 * ChatGPT-Style UI Updates
 * ====================================================== */

/* A) Chat Layout - Flex Column with Scrollable Messages */
.chatPanel {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  overflow: visible;
}

.chatContainer {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* overflow: visible lets flex place the composer naturally;
     only .chatMessagesWrapper scrolls internally. */
  overflow: visible;
  position: relative;
}

/* Top edge fade removed for seamless feel */
.chatContainer::before {
  display: none;
}

/* Composer boundary — keep minimal */
.composerWrapper {
  box-shadow: none;
}

/* Limit Banner */
.limitBanner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: rgba(185, 28, 28, 0.05);
  border-bottom: 1px solid rgba(185, 28, 28, 0.2);
  color: var(--danger);
  font-size: 14px;
  font-weight: 500;
}

.limitBanner.hidden {
  display: none;
}

.limitBanner svg {
  flex-shrink: 0;
}

/* Messages Wrapper - SOLE scroll container for chat */
.chatMessagesWrapper {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  padding: 20px;
  scroll-behavior: auto;
  min-height: 0;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.10) transparent;
}

.chatMessagesWrapper:hover {
  scrollbar-color: rgba(15, 23, 42, 0.18) transparent;
}

.chatMessagesWrapper::-webkit-scrollbar {
  width: 7px;
}

.chatMessagesWrapper::-webkit-scrollbar-track {
  background: transparent;
}

.chatMessagesWrapper::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.10);
  border-radius: 4px;
  transition: background 0.2s;
}

.chatMessagesWrapper:hover::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.18);
}

.chatMessagesWrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.28);
}

/* Chat Log */
.chatLog {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* New Messages Pill */
.newMessagesPill {
  position: sticky;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

.newMessagesPill.hidden {
  display: none;
}

.newMessagesPill:hover {
  background: var(--card-elevated);
  box-shadow: var(--shadow-strong);
  transform: translateX(-50%) translateY(-2px);
}

.newMessagesPill svg {
  animation: bounce 1s ease infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* B) ChatGPT-Style Composer */
.composerWrapper {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(254,254,254,0.98));
  flex-shrink: 0;
  min-height: 72px;
}

.chatgptComposer {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 24px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.composerAttachmentStack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.chatgptComposer:focus-within {
  border-color: rgba(184, 134, 11, 0.22);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08), 0 0 0 3px rgba(184, 134, 11, 0.08);
}

.chatInput {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  outline: none !important;
  box-shadow: none !important;
  padding: 8px 2px;
  line-height: 1.5;
  resize: none;
  min-height: 44px;
  max-height: 180px;
  overflow-y: auto;
  overflow-x: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  align-self: stretch;
  -webkit-appearance: none;
}

.chatInput::placeholder {
  color: var(--muted);
}

.chatInput:focus,
.chatInput:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.composerControls {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex: 0 0 auto;
  align-self: flex-end;
}

.chatgptComposer:not(.isTyping) .chatInput {
  max-height: 44px;
  overflow-y: hidden;
}

.chatgptComposer.isTyping {
  align-items: flex-end;
}

.brandSignature {
  display: block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(127, 107, 82, 0.32);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  line-height: 1;
}

.composerBrandRow {
  width: 100%;
  max-width: 900px;
  margin: 6px auto 0;
  padding-inline: 8px;
  display: flex;
  justify-content: flex-end;
}

/* Recording Indicator */
.recordingIndicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(185, 28, 28, 0.08);
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--danger);
}

.recordingIndicator.hidden {
  display: none;
}

.recordingDot {
  width: 8px;
  height: 8px;
  background: var(--danger);
  border-radius: 50%;
  animation: pulse 1.5s ease infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.9); }
}

/* Circular Buttons (Mic & Send) */
.circleBtn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.9);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.circleBtn.isActive {
  background: rgba(201, 148, 29, 0.14);
  border-color: rgba(201, 148, 29, 0.38);
  color: var(--primary);
  box-shadow: 0 2px 10px rgba(201, 148, 29, 0.16);
}

.circleBtn:hover:not(:disabled) {
  background: var(--primary-soft);
  border-color: rgba(201, 148, 29, 0.3);
  color: var(--primary);
  transform: scale(1.05);
}

.circleBtn:active:not(:disabled) {
  transform: scale(0.95);
}

.circleBtn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.sendBtn:not(:disabled) {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary2) 100%);
  border-color: rgba(201, 148, 29, 0.4);
  color: white;
  box-shadow: 0 2px 8px rgba(201, 148, 29, 0.25);
}
.sendBtn:not(:disabled):active {
  transform: scale(0.96);
}

.sendBtn.stopBtnState:not(:disabled) {
  background: rgba(17, 24, 39, 0.92);
  border-color: rgba(17, 24, 39, 0.98);
  color: #fff;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.18);
}

.attachBtn {
  color: #6b5a44;
}

.composerMenuWrap {
  position: relative;
  display: flex;
  align-items: center;
}

.composerQuickMenu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  min-width: 220px;
  padding: 10px;
  border-radius: 20px;
  background: rgba(26, 26, 28, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 35;
  /* Premium entrance animation */
  opacity: 1;
  transform: translateY(0) scale(1);
  transform-origin: bottom left;
  transition: opacity 200ms cubic-bezier(0.22, 0.9, 0.22, 1),
              transform 200ms cubic-bezier(0.22, 0.9, 0.22, 1);
}

.composerQuickMenu.hidden {
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  pointer-events: none;
  display: flex !important; /* keep in layout for animation */
  visibility: hidden;
}

.composerMenuWrap.open .attachBtn {
  background: rgba(201, 148, 29, 0.12);
  border-color: rgba(201, 148, 29, 0.28);
  color: var(--primary);
}

.composerQuickMenuItem {
  width: 100%;
  border: none;
  background: transparent;
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 0.18s ease, transform 0.18s ease;
}

.composerQuickMenuItem:hover {
  background: rgba(255, 255, 255, 0.08);
}

.composerQuickMenuItem:active {
  transform: scale(0.985);
}

.composerQuickMenuIcon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.92);
}

.composerQuickMenuLabel {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.sendBtn:not(:disabled):hover {
  background: linear-gradient(135deg, var(--primary2) 0%, #8a6112 100%);
  box-shadow: 0 4px 12px rgba(201, 148, 29, 0.35);
}

.sendBtn.stopBtnState:not(:disabled):hover {
  background: rgba(17, 24, 39, 1);
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.24);
}


/* Mic Button with Recording Ring */
.micButtonWrapper {
  position: relative;
  width: 40px;
  height: 40px;
}

.micBtn {
  position: relative;
  z-index: 2;
}

.recordingRing {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--danger);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.2s ease;
}

.recordingRing.active {
  opacity: 1;
  animation: ringPulse 2s ease infinite;
}

@keyframes ringPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.4;
  }
}

/* System Message (for limit/errors) */
.systemMessage {
  padding: 14px 18px;
  background: rgba(107, 114, 128, 0.05);
  border: 1px solid rgba(107, 114, 128, 0.15);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.systemMessage.error {
  background: rgba(185, 28, 28, 0.05);
  border-color: rgba(185, 28, 28, 0.2);
  color: var(--danger);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .chatMessagesWrapper {
    padding: 12px;
  }

  .composerWrapper {
    padding: 12px;
  }

  .chatgptComposer {
    padding: 10px 12px;
  }

  .circleBtn {
    width: 36px;
    height: 36px;
  }

  .recordingRing {
    width: 44px;
    height: 44px;
  }
}


/* ======================================================
 * WORKSPACE & CASE FILES SIDEBAR SECTIONS
 * ====================================================== */

/* Sidebar Sections */
.sidebarSection {
  border-top: 1px solid var(--border);
  padding: 16px 10px;
  position: relative;
}

.sidebarSection::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10px;
  right: 10px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 148, 29, 0.2), transparent);
}

.sectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.sectionTitle {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}

.manageFilesLink {
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 6px 10px;
  cursor: pointer;
  color: var(--muted);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

.manageFilesLink:hover {
  background: #fff;
  color: var(--text);
  border-color: rgba(201, 148, 29, 0.24);
}

/* Workspace Section */
.workspaceContent {
  font-size: 13px;
}

.workspaceState.hidden {
  display: none;
}

.workspaceStatus {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(107, 114, 128, 0.05);
  border-radius: var(--radius);
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--muted);
}

.workspaceStatus.connected {
  background: rgba(16, 185, 129, 0.08);
  color: #059669;
}

.workspaceStatus svg {
  flex-shrink: 0;
}

.workspaceEmail {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspaceNote {
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.4;
}

/* Case Files Section */
.caseFilesContent {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* File Upload Area */
.fileUploadArea {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.uploadDropZone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 20px 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Old workspace tabs - hidden by redesign, kept for JS compat */
.chanelleWorkspaceTabs {
  display: none !important;
}

.chanelleWorkspaceTab {
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  color: #0f172a;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.chanelleWorkspaceTab.active {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}

.caseWorkspacePanel {
  padding: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fdfcf9;
  border-radius: 20px;
  border: 1px solid rgba(180, 155, 100, 0.18);
  box-shadow:
    0 32px 64px rgba(15, 23, 42, 0.08),
    0 6px 16px rgba(15, 23, 42, 0.04),
    0 0 0 0.5px rgba(255, 255, 255, 0.9) inset;
}

/* Amber accent line at the top of each case panel */
.caseWorkspacePanel::before {
  content: '';
  display: block;
  height: 3px;
  flex: 0 0 auto;
  background: linear-gradient(90deg,
    #c9941d 0%,
    rgba(201, 148, 29, 0.45) 50%,
    transparent 100%);
  border-radius: 20px 20px 0 0;
}

/* caseWorkspaceActions: removed from DOM, actions now inline in caseWorkspaceMeta */

.caseWorkspaceEmpty {
  background: transparent;
  margin: 0;
  padding: 0;
  border: none;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================
   Premium Case Panel Empty States
   ============================================ */

.caseEmptyState {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
}

.caseEmptyVirgin,
.caseEmptyPostClose {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 480px;
  width: 100%;
  gap: 0;
}

.caseEmptyIcon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(201, 148, 29, 0.07);
  border: 1px solid rgba(201, 148, 29, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  color: #c9941d;
  flex: 0 0 auto;
}

.caseEmptyHeading {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: 24px;
  font-weight: 600;
  color: #1a1408;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.caseEmptyBody {
  font-size: 14px;
  color: #6b6045;
  line-height: 1.7;
  margin: 0 0 28px;
  max-width: 380px;
}

.caseSourceChooser {
  width: 100%;
  margin-bottom: 22px;
}

.caseSourceChooserLabel {
  margin-bottom: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b8860b;
}

.caseSourceGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.caseSourceCard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 8px;
  min-height: 126px;
  padding: 18px 18px 16px;
  border-radius: 16px;
  border: 1px solid rgba(180, 155, 100, 0.24);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 247, 238, 0.96));
  box-shadow: 0 14px 30px rgba(66, 51, 21, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  color: #2c2417;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.caseSourceCard:hover {
  transform: translateY(-1px);
  border-color: rgba(201, 148, 29, 0.34);
  box-shadow: 0 18px 34px rgba(66, 51, 21, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.caseSourceCard:active {
  transform: translateY(0);
}

.caseSourceCard:disabled {
  opacity: 0.58;
  cursor: wait;
  transform: none;
}

.caseSourceCardTitle {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: #20190d;
}

.caseSourceCardBody {
  font-size: 12.5px;
  line-height: 1.55;
  color: #716346;
}

.caseEmptyHowTo {
  width: 100%;
  background: rgba(253, 250, 242, 0.9);
  border: 1px solid rgba(201, 148, 29, 0.15);
  border-radius: 10px;
  padding: 20px 24px;
  text-align: left;
  margin-bottom: 28px;
}

.caseEmptyHowToTitle {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c9941d;
  margin-bottom: 14px;
}

.caseEmptySteps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-reset: steps;
}

.caseEmptySteps li {
  counter-increment: steps;
  padding-left: 28px;
  position: relative;
  font-size: 13.5px;
  color: #3d3420;
  line-height: 1.55;
}

.caseEmptySteps li::before {
  content: counter(steps);
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  background: rgba(201, 148, 29, 0.12);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: #c9941d;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 18px;
  text-align: center;
}

.caseEmptySteps li em {
  font-style: italic;
  color: #8a7040;
}

.caseEmptyCta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 24px;
  background: #c9941d;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  margin-bottom: 12px;
}

.caseEmptyCta:hover {
  background: #b8860b;
  transform: translateY(-1px);
}

.caseEmptyCta:active {
  transform: translateY(0);
}

.caseEmptyCtaSecondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  background: transparent;
  color: #a89878;
  border: 1px solid rgba(180, 155, 100, 0.3);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.caseEmptyCtaSecondary:hover {
  color: #6b6045;
  border-color: rgba(180, 155, 100, 0.55);
}

.caseWorkspaceContent {
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 20px 28px 0;
  box-shadow: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(180, 155, 100, 0.2) transparent;
}

.caseWorkspaceContent:hover {
  scrollbar-color: rgba(15, 23, 42, 0.18) transparent;
}

.caseWorkspaceContent::-webkit-scrollbar { width: 7px; }
.caseWorkspaceContent::-webkit-scrollbar-track { background: transparent; }
.caseWorkspaceContent::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.10);
  border-radius: 4px;
}
.caseWorkspaceContent:hover::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.18);
}
.caseWorkspaceContent::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.28);
}

.caseWorkspaceMeta {
  font-size: 11.5px;
  color: #a89878;
  max-width: 960px;
  margin: 0 auto 20px;
  width: 100%;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(180, 155, 100, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ── Premium floating toolbar ── */
.caseMetaToolbar {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 11px;
  padding: 4px;
  box-shadow:
    0 2px 8px rgba(15, 23, 42, 0.07),
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 0 0 0.5px rgba(255, 255, 255, 0.9) inset;
  backdrop-filter: blur(12px);
  flex: 0 0 auto;
}

.caseToolbarBtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  color: #64748b;
  border-radius: 7px;
  padding: 5px 7px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  line-height: 1;
  white-space: nowrap;
}

.caseToolbarBtn:hover {
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
}

.caseToolbarBtn--export {
  background: linear-gradient(135deg, #c9941d 0%, #b07d12 100%);
  color: #fff;
  padding: 5px 11px;
  box-shadow: 0 1px 4px rgba(201, 148, 29, 0.3);
}

.caseToolbarBtn--export:hover {
  background: linear-gradient(135deg, #d4a020 0%, #c9941d 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(201, 148, 29, 0.4);
}

.caseToolbarBtn--danger {
  color: #b91c1c;
}

.caseToolbarBtn--danger:hover {
  background: rgba(185, 28, 28, 0.07);
  color: #991b1b;
}

.caseToolbarBtn--close {
  color: #94a3b8;
}

.caseToolbarBtn--close:hover {
  background: rgba(15, 23, 42, 0.06);
  color: #475569;
}

.caseToolbarDivider {
  width: 1px;
  height: 16px;
  background: rgba(15, 23, 42, 0.08);
  margin: 0 2px;
  flex: 0 0 auto;
}

.caseMetaInfo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.caseMetaEyebrow {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b8860b;
}

.caseMetaLabel {
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: #a89878;
  font-style: italic;
}

.caseMetaActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
}

.caseMetaHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.caseMetaActionGroup {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.caseInlineBtn {
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: transparent;
  color: #475569;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  line-height: 1.4;
}

.caseInlineBtn:hover {
  background: rgba(15, 23, 42, 0.04);
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.12);
}

.caseInlineBtn--primary {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
  border-radius: 6px;
}

.caseInlineBtn--primary:hover {
  background: #1e293b;
  border-color: #1e293b;
  color: #fff;
}

.caseInlineBtn--primary.isLoading {
  opacity: 0.82;
  cursor: wait;
}

.caseDeleteBtn {
  min-width: 72px;
  height: 34px;
  padding: 0 12px;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  color: #7f1d1d;
  background: rgba(254, 242, 242, 0.96);
  border-color: rgba(248, 113, 113, 0.18);
  margin-left: auto;
}

.caseDeleteBtn:hover {
  color: #991b1b;
  background: rgba(254, 226, 226, 0.98);
  border-color: rgba(239, 68, 68, 0.28);
}

.caseHeaderCloseBtn {
  width: 32px;
  height: 32px;
  padding: 0;
  flex: 0 0 auto;
  justify-content: center;
  color: rgba(71, 85, 105, 0.82);
  background: rgba(255, 255, 255, 0.44);
}

.caseHeaderCloseBtn:hover {
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
}

.caseExportMenuWrap {
  position: relative;
  display: inline-flex;
}

.caseExportMenu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 168px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
  z-index: 60;
  backdrop-filter: blur(12px);
  transform-origin: top right;
  animation: exportDropIn 0.1s ease-out;
}

.caseExportMenu.hidden {
  display: none !important;
}

@keyframes exportDropIn {
  from { opacity: 0; transform: translateY(-3px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.caseExportMenuItem {
  border: none;
  background: transparent;
  color: #334155;
  border-radius: 8px;
  padding: 8px 12px;
  text-align: left;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.caseExportMenuItem:hover {
  background: rgba(15, 23, 42, 0.05);
  color: #0f172a;
}

.caseResetBtn {
  font-size: 14px;
  font-weight: 600;
  width: 28px;
  height: 28px;
  padding: 0;
  margin-left: 4px;
  color: #94a3b8;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  border-color: transparent;
}

.caseResetBtn:hover {
  color: #991b1b;
  background: rgba(153, 27, 27, 0.05);
  border-color: transparent;
}

/* caseWorkspaceEditor / caseIntelligenceEditor: see .caseDocViewer block below for premium definition */

@media (max-width: 768px) {
  .caseWorkspacePanel {
    padding: 0;
  }

  .caseWorkspaceContent {
    padding: 14px 12px 0;
  }

  .caseMetaActions {
    gap: 4px;
  }

  .caseInlineBtn {
    padding: 4px 8px;
    font-size: 11px;
  }

  .workspacePanelComposer {
    padding: 12px;
    min-height: 64px;
  }

  .brandSignature {
    font-size: 9px;
    color: rgba(127, 107, 82, 0.28);
  }

  .composerBrandRow {
    margin-top: 4px;
    padding-inline: 4px;
  }

  .caseWorkspaceEditor,
  .caseIntelligenceEditor {
    font-size: 14px;
  }

  .caseWorkspaceEditor.isEditing,
  .caseIntelligenceEditor.isEditing {
    padding: 12px 14px 24px;
  }
}

.caseSection {
  margin-bottom: 14px;
}

.caseSectionTitle {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.caseSectionBody {
  font-size: 13px;
  line-height: 1.55;
  color: #1e293b;
}

.caseBulletList {
  margin: 0;
  padding-left: 18px;
}

.caseBulletList li {
  margin: 4px 0;
}

/* Old dropdown menu styles removed — actions now inline in caseWorkspaceMeta */

/* ========================================
   Workspace Panel Composer
   ======================================== */
.workspacePanelComposer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 18px 20px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(254,254,254,0.98));
  flex: 0 0 auto;
  position: relative;
  min-height: 72px;
}

.workspacePanelComposerBar {
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.workspacePanelComposerInput {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  max-height: 160px;
  padding: 12px 16px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 24px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: none;
  overflow-y: auto;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}

.workspacePanelComposerInput:focus {
  outline: none;
  border-color: rgba(15, 23, 42, 0.22);
  box-shadow: 0 2px 16px rgba(15, 23, 42, 0.08);
}

.workspacePanelComposerInput::placeholder {
  color: #94a3b8;
  font-style: italic;
}

.workspacePanelComposerSend {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #0f172a;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}

.workspacePanelComposerSend:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.workspacePanelComposerSend:not(:disabled):hover {
  opacity: 0.85;
  transform: scale(1.05);
}

.workspacePanelComposerSend:not(:disabled):active {
  transform: scale(0.95);
}

.workspacePanelComposer.isSending .workspacePanelComposerInput {
  opacity: 0.6;
  pointer-events: none;
}

/* Workspace mic button */
.workspacePanelMicBtn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}

.workspacePanelMicBtn:hover {
  background: rgba(15, 23, 42, 0.06);
  color: #334155;
}

.workspacePanelMicBtn.isActive {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  animation: workspaceMicPulse 1.4s ease-in-out infinite;
}

@keyframes workspaceMicPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3); }
  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

.workspacePanelComposer.isSending .workspacePanelMicBtn {
  opacity: 0.35;
  pointer-events: none;
}

.uploadStageStatus {
  margin-top: 8px;
  font-size: 12px;
  color: #475569;
  line-height: 1.4;
}

.uploadStageStatus.isActive {
  color: #1d4ed8;
}

.caseBriefEditor {
  min-height: 460px;
}

/* ========================================
   Premium Case Document Viewer (read-only)
   ======================================== */
/* ============================================
   Premium Legal Document Viewer
   ============================================ */
.caseDocViewer {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 0 0 56px;
  flex: 0 0 auto;
  overflow: visible;
  outline: none;
}

.caseDocViewer.hidden {
  display: none !important;
}

/* Document title — first section, e.g. "Case Title" / "Matter Title" */
.caseDocTitleSection {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1.5px solid rgba(180, 155, 100, 0.2);
  text-align: left;
}

.caseDocDocumentTitle {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: 28px;
  font-weight: 600;
  color: #1a1408;
  line-height: 1.25;
  letter-spacing: -0.01em;
  word-break: break-word;
}

.caseDocDocumentSubtitle {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b8860b;
  margin-bottom: 6px;
}

/* Regular sections */
.caseDocSection {
  margin-bottom: 26px;
}

.caseDocSection:last-child {
  margin-bottom: 0;
}

.caseDocSectionTitle {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b8860b;
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.caseDocSectionTitle::before {
  content: '';
  display: block;
  width: 2.5px;
  height: 13px;
  background: linear-gradient(180deg, #c9941d 0%, rgba(201, 148, 29, 0.2) 100%);
  border-radius: 2px;
  flex-shrink: 0;
}

.caseDocSectionBody {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.85;
  color: #1e1a10;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

/* Multi-item list (Timeline, Parties, Evidence etc.) */
.caseDocItemList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.caseDocItemList li {
  position: relative;
  padding: 10px 0 10px 20px;
  border-bottom: 1px solid rgba(180, 155, 100, 0.10);
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: 16px;
  line-height: 1.6;
  color: #2a2210;
}

.caseDocItemList li:last-child {
  border-bottom: none;
}

.caseDocItemList li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c9941d;
  opacity: 0.65;
}

/* Edit mode textarea */
.caseWorkspaceEditor,
.caseIntelligenceEditor {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  border: 1px solid rgba(180, 155, 100, 0.22);
  background: rgba(255, 253, 248, 0.9);
  color: #1e1a10;
  border-radius: 12px;
  padding: 18px 20px 40px;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: 16px;
  line-height: 1.85;
  resize: none;
  white-space: pre-wrap;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  box-shadow: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.caseWorkspaceEditor:focus,
.caseIntelligenceEditor:focus {
  outline: none;
  border-color: rgba(201, 148, 29, 0.4);
  box-shadow: 0 0 0 3px rgba(201, 148, 29, 0.07);
}

.caseWorkspaceEditor.isEditing,
.caseIntelligenceEditor.isEditing {
  border-color: rgba(201, 148, 29, 0.35);
  box-shadow: 0 0 0 3px rgba(201, 148, 29, 0.07);
}

.chatCard > .caseWorkspacePanel:not(.hidden) {
  order: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

#panelChat.workspaceComposerDock {
  order: 2;
  flex: 0 0 auto;
}

#panelChat.workspaceComposerDock #sharedChatPanel {
  flex: 0 0 auto;
}

#panelChat.workspaceComposerDock .composerWrapper {
  padding-top: 10px;
  border-top: 1px solid rgba(15, 23, 42, 0.04);
  background: transparent;
}

/* Old sofie workspace tabs - hidden by redesign */
.sofieWorkspaceTabs {
  display: none !important;
}

.sofieWorkspaceTab {
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  color: #334155;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.sofieWorkspaceTab.active {
  background: #0b3a5b;
  color: #fff;
  border-color: #0b3a5b;
}

/* Old pipeline status - hidden by redesign, replaced by statusChips */
.sofiePipelineStatus {
  display: none !important;
}

.sofiePipelineChip {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sofiePipelineChip.active[data-stage="researching"] {
  color: #0b3a5b;
  background: #eff6ff;
  border-color: rgba(11, 58, 91, 0.22);
}

.sofiePipelineChip.active[data-stage="validating"] {
  color: #3730a3;
  background: #eef2ff;
  border-color: rgba(55, 48, 163, 0.22);
}

.sofiePipelineChip.active[data-stage="ready"] {
  color: #065f46;
  background: #ecfdf5;
  border-color: rgba(6, 95, 70, 0.22);
}

.sofieGenerateTools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 4px;
  padding: 2px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: #fff;
}

.sofieGenerateLabel {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.generateDropdown {
  position: relative;
}

.generateBtn {
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #f8fafc;
  color: #0f172a;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}

.generateBtn.active {
  background: #e8f3ff;
  border-color: rgba(14, 116, 144, 0.3);
  color: #0b3a5b;
}

.generateCaret {
  font-size: 10px;
  color: #64748b;
}

.generateMenu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 190px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 40;
}

.generateMenuItem {
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  text-align: left;
  padding: 8px 10px;
  cursor: pointer;
}

.generateMenuItem:hover {
  background: #f1f5f9;
}

.generateMenuItem.active {
  background: #e8f3ff;
  color: #0b3a5b;
}

.sofieOutputBtn.active {
  background: #0b3a5b;
  color: #fff;
  border-color: #0b3a5b;
}

/* ========================================
   EMPTY STATE — new conversation landing
   ======================================== */
.emptyState {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 280px;
  padding: 40px 24px;
}

.emptyStateInner {
  max-width: 560px;
  width: 100%;
  text-align: center;
  position: relative;
}

.emptyStateTitle {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--text-primary);
  letter-spacing: 0.2px;
  margin-bottom: 6px;
}

.emptyStateSub {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 28px;
}

.emptyStatePrompt {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 16px;
}

.emptyStateSuggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.emptyStateSuggestionBtn {
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.7);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.emptyStateSuggestionBtn:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(15, 23, 42, 0.18);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.emptyStateSuggestionBtn:active {
  transform: scale(0.97);
}

.emptyStateDismissBtn {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  color: rgba(71, 85, 105, 0.88);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transition: transform 0.18s ease, background 0.18s ease;
}

.emptyStateDismissBtn:hover {
  background: #fff;
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .emptyState {
    padding: 24px 16px;
    min-height: 200px;
  }

  .emptyStateTitle {
    font-size: 19px;
  }

  .emptyStateSuggestions {
    gap: 8px;
  }

  .emptyStateSuggestionBtn {
    padding: 8px 14px;
    font-size: 12.5px;
  }
}

.researchMemoCard .bubble {
  background: linear-gradient(160deg, #f8fbff, #eef5ff);
  border: 1px solid rgba(11, 58, 91, 0.2);
}

.researchMemoGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.researchMemoSection {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
}

.researchMemoTitle {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #0b3a5b;
  margin-bottom: 6px;
}

.researchMemoBody {
  font-size: 13px;
  color: #1e293b;
  line-height: 1.5;
}

/* Chat conversation readability refinements */
.chatMessagesWrapper {
  padding: 24px 32px 8px;
}

.chatMessagesWrapper .chatLog {
  max-width: 960px;
  gap: 28px;
  padding: 12px 0 40px;
  margin: 0 auto;
}

.chatMessagesWrapper .msg {
  margin: 0;
}

.chatMessagesWrapper .bubble {
  max-width: min(100%, 920px);
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: none;
  line-height: 1.7;
  font-size: 14.5px;
}

.chatMessagesWrapper .msg.assistant .bubble {
  padding: 16px 20px;
  border: none;
  background: transparent;
}

.typingIndicatorRow .bubble,
.chatMessagesWrapper .typingIndicatorRow .bubble {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.05);
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.progressiveBubble {
  will-change: contents;
}

/* Improve spacing between paragraphs inside assistant bubbles */
.chatMessagesWrapper .msg.assistant .bubble p,
.chatMessagesWrapper .msg.assistant .bubble li {
  margin-bottom: 0.5em;
}
.chatMessagesWrapper .msg.assistant .bubble p:last-child,
.chatMessagesWrapper .msg.assistant .bubble li:last-child {
  margin-bottom: 0;
}

.chatMessagesWrapper .msg.user .bubble {
  background: rgba(238, 245, 255, 0.8);
  border-color: rgba(11, 58, 91, 0.08);
}

.composerWrapper {
  padding: 12px 32px 18px;
  background: transparent;
  box-shadow: none;
  border-top: 1px solid rgba(15, 23, 42, 0.04);
}

.chatgptComposer {
  max-width: 960px;
  padding: 12px 16px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.04);
}

.chatInput {
  font-size: 15px;
  line-height: 1.5;
  min-height: 44px;
  max-height: 180px;
  padding: 8px 2px;
  outline: none !important;
  box-shadow: none !important;
}

.composerControls {
  gap: 8px;
}

.uploadDropZone:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

/* Final chat layout override: keep composer visible inside the panel at all sizes. */
/* ======================================================
 * Chat Flex-Column Layout Fix
 * Ensures composer is always visible at all viewport sizes.
 *
 * Flex chain:  .appShell > .layout > .main > .chatCard
 *   > #panelChat > #sharedChatPanel
 *     > .chatMessagesWrapper  (scrollable, flex:1)
 *     > .composerWrapper      (flex:0 0 auto, never shrinks)
 * ====================================================== */

.main,
.main > .chatCard,
#panelChat,
#sharedChatPanel {
  min-height: 0;
}

#panelChat {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: hidden;
}

#sharedChatPanel {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  height: auto !important;
  overflow: hidden;
}

.chatMessagesWrapper {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Ensure .hidden wins over higher-specificity selectors */
.chatMessagesWrapper.hidden { display: none !important; }
.caseWorkspacePanel.hidden { display: none !important; }
.caseWorkspaceEmpty.hidden { display: none !important; }
.caseWorkspaceContent.hidden { display: none !important; }
.workspacePanelComposer.hidden { display: none !important; }

.caseWorkspacePanel.workspaceGenerationPending .caseSourceCard {
  pointer-events: none;
  opacity: 0.64;
}

.caseWorkspacePanel.workspaceGenerationPending .caseSourceChooserLabel::after {
  content: "Generating…";
  margin-left: 8px;
  letter-spacing: 0.04em;
  color: #8a7040;
}

.chatLog {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  flex: 0 0 auto;
}

.composerWrapper {
  /* Use flex placement instead of sticky — sticky fails inside
     overflow:hidden ancestors. flex: 0 0 auto keeps it at the
     bottom of the flex column and prevents it from shrinking. */
  flex: 0 0 auto;
  z-index: 20;
  position: relative;
}


/* --- Responsive: ensure chat fills viewport minus chrome --- */

@media (max-width: 980px) {
  .main,
  .main > .chatCard,
  #panelChat,
  #sharedChatPanel {
    min-height: 0;
  }

  .chatCard {
    /* Fill remaining viewport height so composer stays on-screen */
    min-height: max(320px, calc(100dvh - 160px));
  }
}

/* Tablet / small desktop */
@media (max-width: 900px) {
  .appShell {
    padding: 10px;
  }

  .chatCard {
    min-height: max(340px, calc(100dvh - 180px));
  }
}

/* Small tablet / large phone */
@media (max-width: 768px) {
  .appShell {
    padding: 8px;
  }

  .layout {
    gap: 8px;
    margin-top: 8px;
  }

  .chatCard {
    min-height: max(300px, calc(100dvh - 160px));
  }

  /* Tighten composer for smaller screens */
  .composerWrapper {
    min-height: 68px;
    padding: 10px 20px;
  }

  .chatMessagesWrapper {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .appShell {
    padding: 4px;
  }

  .layout {
    gap: 4px;
    margin-top: 4px;
  }

  .topBar {
    padding: 8px 10px;
    gap: 8px;
  }

  .chatCard {
    min-height: max(280px, calc(100dvh - 110px));
    border-radius: 0;
  }

  .chatMessagesWrapper {
    padding: 10px 16px 8px;
  }

  .chatMessagesWrapper .chatLog {
    gap: 18px;
  }

  .chatMessagesWrapper .bubble {
    padding: 12px 14px;
  }

  .chatMessagesWrapper .msg.assistant .bubble {
    padding: 14px 15px;
  }

  .composerWrapper {
    min-height: 60px;
    padding: 8px 16px;
    border-radius: 0;
  }

  .chatgptComposer {
    padding: 8px 10px;
    border-radius: 14px;
    gap: 8px;
  }

  .chatInput {
    min-height: 42px;
    max-height: 168px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .circleBtn {
    width: 32px;
    height: 32px;
  }
}

.uploadDropZone.dragover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.uploadDropZone svg {
  margin: 0 auto 10px;
  color: var(--muted);
}

.dropZoneText {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

/* Selected Files Preview */
.selectedFilesPreview.hidden {
  display: none;
}

.selectedFilesHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
}

.selectedFilesList {
  max-height: 150px;
  overflow-y: auto;
  padding: 4px 0;
}

.selectedFileItem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--text);
}

.selectedFileItem svg {
  flex-shrink: 0;
  color: var(--primary);
}

.selectedFileName {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Uploaded Files List */
.uploadedFilesList {
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.uploadedFileItem {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,245,238,0.92));
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  font-size: 12px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.uploadedFileItem:hover {
  border-color: rgba(201, 148, 29, 0.34);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,246,238,0.95));
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
  transform: translateY(-1px);
}

.uploadedFileItem.isActiveFile {
  border-color: rgba(201, 148, 29, 0.46);
  background: linear-gradient(180deg, rgba(255,251,241,0.98), rgba(249,242,225,0.95));
  box-shadow: 0 12px 28px rgba(201, 148, 29, 0.14);
}

.uploadedFilePrimary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.fileIcon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(201, 148, 29, 0.14), rgba(201, 148, 29, 0.08));
  border: 1px solid rgba(201, 148, 29, 0.18);
  border-radius: 10px;
  color: #9a6b10;
}

.fileDetails {
  flex: 1;
  min-width: 0;
}

.fileHeadingRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 5px;
}

.fileName {
  font-weight: 600;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.35;
  margin-bottom: 0;
}

.fileStatePill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(217, 119, 6, 0.12);
  color: #a16207;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fileMetaLine {
  font-size: 11px;
  color: #7c6850;
  line-height: 1.4;
}

.fileArchiveHint {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
}

.uploadedFileActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
  padding-left: 46px;
}

.uploadedFileActionBtn {
  border: 1px solid rgba(15, 23, 42, 0.09);
  background: rgba(255,255,255,0.84);
  color: #4b5563;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.uploadedFileActionBtn:hover {
  background: rgba(201, 148, 29, 0.08);
  border-color: rgba(201, 148, 29, 0.24);
  color: #3b2f1d;
  transform: translateY(-1px);
}

.uploadedFileActionBtn.danger:hover {
  background: rgba(185, 28, 28, 0.08);
  border-color: rgba(185, 28, 28, 0.18);
  color: #991b1b;
}

.fileMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
}

.fileActions {
  display: flex;
  gap: 4px;
}

.fileItemMenu {
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
}

.fileItemMenu .caseMenuBtn {
  padding: 2px 6px;
}

.fileItemMenu .caseMenu {
  position: fixed !important;
  min-width: 120px;
  z-index: 999;
  left: auto;
  top: auto;
  bottom: auto;
}

.fileActionBtn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--muted);
  border-radius: 4px;
  transition: all 0.2s ease;
}

.fileActionBtn:hover {
  background: var(--bg);
  color: var(--text);
}

.fileActionBtn.danger:hover {
  background: rgba(185, 28, 28, 0.08);
  color: var(--danger);
}

/* Status Pills */
.statusPill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.statusPill.uploaded {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}

.statusPill.ingested {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.statusPill.error {
  background: rgba(185, 28, 28, 0.1);
  color: var(--danger);
}

/* Storage Note */
.storageNote {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(59, 130, 246, 0.05);
  border-radius: var(--radius);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}

.storageNote svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* Empty States */
.emptyFilesState {
  text-align: center;
  padding: 20px;
  color: var(--muted);
  font-size: 13px;
}

/* ======================================================
 * MANAGE FILES MODAL
 * ====================================================== */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal.hidden {
  display: none;
}

.modalOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
}

.modalContent {
  position: relative;
  z-index: 1;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-strong);
  max-width: 900px;
  width: 90%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.manageFilesModalContent {
  max-width: 1000px;
}

.modalHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.modalTitle {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
}

.modalBody {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.modalFooter {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}

/* Search Filter */
.searchFilter {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 20px;
}

.searchFilter svg {
  flex-shrink: 0;
  color: var(--muted);
}

.searchFilter input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  color: var(--text);
}

.searchFilter input::placeholder {
  color: var(--muted);
}

/* Files Table */
.filesTable {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.filesTableHeader {
  display: flex;
  padding: 12px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fileCol {
  padding: 0 8px;
}

.fileColName {
  flex: 2;
}

.fileColStatus {
  flex: 1;
}

.fileColSize {
  flex: 0.8;
}

.fileColDate {
  flex: 1.2;
}

.fileColActions {
  flex: 0.8;
  text-align: right;
}

.filesTableBody {
  max-height: 450px;
  overflow-y: auto;
}

.fileRow {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  transition: background 0.2s ease;
}

.fileRow:last-child {
  border-bottom: none;
}

.fileRow:hover {
  background: var(--bg);
}

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

.fileRowName svg {
  flex-shrink: 0;
  color: var(--primary);
}

.fileRowActions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    max-width: 300px;
    min-width: 0;
  }

  .sidebarSection {
    padding: 12px 10px;
  }

  .uploadDropZone {
    padding: 16px 10px;
  }

  .uploadedFilesList {
    max-height: 200px;
  }

  .modalContent {
    width: 95%;
    max-height: 90vh;
  }

  .filesTableHeader {
    font-size: 10px;
  }

  .fileCol {
    padding: 0 4px;
  }

  .fileColSize,
  .fileColDate {
    display: none;
  }
}


/* ======================================================
 * REDESIGNED NAVIGATION HIERARCHY
 * Primary Nav > Secondary Tabs > Status Chips
 * ====================================================== */

/* ========== Primary Navigation ========== */
.primaryNav {
  display: flex;
  gap: 6px;
  padding: 4px 4px;
  margin-top: 2px;
  background: transparent;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
  box-shadow: none;
  animation: fadeInUp 0.6s ease backwards;
  animation-delay: 0.2s;
}

.primaryNav.hidden {
  display: none;
}

.primaryNavTab {
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.primaryNavTab:hover {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.12);
  color: var(--text);
}

.primaryNavTab.active {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15);
}

/* ========== Secondary Navigation Row ========== */
.secondaryNavRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px;
  margin-top: 4px;
  animation: fadeInUp 0.6s ease backwards;
  animation-delay: 0.3s;
}

.secondaryTabs {
  display: flex;
  gap: 6px;
}

.secondaryTab {
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.7);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.01em;
}

.secondaryTab:hover {
  background: rgba(255,255,255,0.95);
  color: var(--text);
  border-color: var(--border-strong);
}

.secondaryTab.active {
  background: #fff;
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: 0 2px 8px rgba(26, 26, 46, 0.06);
  font-weight: 700;
}

/* ========== Status Chips ========== */
.statusChips {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.statusChip {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(248, 250, 252, 0.95);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
  opacity: 0.5;
}

.statusChip.active {
  opacity: 1;
}

.statusChip.active[data-stage="researching"] {
  color: #0b3a5b;
  background: #eff6ff;
  border-color: rgba(11, 58, 91, 0.22);
}

.statusChip.active[data-stage="validating"] {
  color: #3730a3;
  background: #eef2ff;
  border-color: rgba(55, 48, 163, 0.22);
}

.statusChip.active[data-stage="ready"] {
  color: #065f46;
  background: #ecfdf5;
  border-color: rgba(6, 95, 70, 0.22);
}

/* ========== Compact Upload Button ========== */
.compactUploadBtn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.6);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.compactUploadBtn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(201, 148, 29, 0.06);
}

.compactUploadBtn svg {
  flex-shrink: 0;
}

/* ========== Conversation Error State ========== */
.conversationErrorState {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  min-height: 400px;
}

.conversationErrorState.hidden {
  display: none;
}

.errorStateCard {
  text-align: center;
  max-width: 360px;
  padding: 40px 32px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.errorStateIcon {
  color: var(--muted);
  margin-bottom: 16px;
}

.errorStateTitle {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.errorStateDesc {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 20px;
  line-height: 1.5;
}

.errorStateActions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* ========== Chat Reset Button ========== */
.chatResetBtn:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.22);
  outline-offset: 2px;
}

/* ========== Responsive: Primary + Secondary Nav ========== */

@media (max-width: 768px) {
  .primaryNav {
    gap: 4px;
    padding: 4px 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .primaryNav::-webkit-scrollbar {
    display: none;
  }

  .primaryNavTab {
    padding: 8px 14px;
    font-size: 13px;
    flex-shrink: 0;
  }

  .secondaryNavRow {
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 10px;
  }

  .secondaryTabs {
    flex: 1;
    min-width: 0;
  }

  .secondaryTab {
    padding: 5px 12px;
    font-size: 11px;
  }

  .statusChips {
    flex-wrap: wrap;
    gap: 4px;
  }

  .statusChip {
    font-size: 10px;
    padding: 3px 8px;
  }
}

@media (max-width: 480px) {
  .primaryNavTab {
    padding: 7px 10px;
    font-size: 12px;
  }

  .secondaryNavRow {
    flex-direction: column;
    align-items: flex-start;
  }

  .statusChips {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ======================================================
 * MOBILE & TABLET RESPONSIVE OPTIMIZATION
 * Breakpoints: 980px (tablet), 768px (small tablet),
 *              480px (phone), 360px (small phone)
 * Safe-area insets for notched devices.
 * ====================================================== */

/* --- Safe-area environment padding for notched devices --- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .composerWrapper {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  .appShell {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* ==================== TABLET (≤980px) ==================== */
@media (max-width: 980px) {
  /* --- Sidebar overlay backdrop --- */
  .sidebar::before {
    content: '';
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 46, 0.35);
    backdrop-filter: blur(4px);
    z-index: -1;
  }

  .sidebar:not(.collapsed)::before {
    display: block;
  }

  /* --- TopBar compact --- */
  .topBar {
    border-radius: var(--radius);
    gap: 8px;
  }

  .logo {
    width: 36px;
    height: 36px;
    font-size: 16px;
    border-radius: 8px;
  }

  .brandTitle {
    font-size: 18px;
  }

  .brandSub {
    font-size: 12px;
  }

  /* --- Assistant switcher: compact horizontal row --- */
  .assistantTabsBar {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-top: 4px;
    margin-bottom: 4px;
  }

  .assistantTab {
    padding: 6px 10px;
    border-radius: 10px;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .assistantTabRole {
    font-size: 11px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* --- Primary nav: horizontal scroll --- */
  .primaryNav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 2px;
    gap: 4px;
    margin-top: 2px;
  }

  .primaryNav::-webkit-scrollbar {
    display: none;
  }

  .primaryNavTab {
    padding: 5px 14px;
    font-size: 13px;
    flex-shrink: 0;
  }

  /* --- Drafts layout: single column --- */
  .draftsLayout {
    grid-template-columns: 1fr;
  }

  /* --- Drawers: full-width on tablet --- */
  .drawerContent {
    width: 100%;
    max-width: 100%;
  }

  .drawerHeader {
    padding: 16px 20px;
  }

  .drawerActions {
    padding: 12px 20px;
  }

  .historyList {
    padding: 12px 16px;
  }
}

/* ==================== SMALL TABLET (≤768px) ==================== */
@media (max-width: 768px) {
  /* --- TopBar: hide subtitle, shrink brand --- */
  .brandSub {
    display: none;
  }

  .brandTitle {
    font-size: 18px;
  }

  .brand {
    gap: 10px;
  }

  .logo {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .topActions .btn span:not(.sr-only) {
    /* Keep icon buttons but hide text labels on small tablets */
  }

  /* --- Assistant switcher: even more compact --- */
  .assistantTabsBar {
    gap: 6px;
    margin-top: 6px;
    margin-bottom: 6px;
  }

  .assistantSwitcherLabel {
    font-size: 10px;
  }

  .assistantTabName {
    font-size: 12px;
  }

  .assistantTabRole {
    display: none;
  }

  .assistantAvatar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }

  /* --- Chat bubbles: wider, less padding --- */
  .bubble {
    max-width: min(720px, 96%);
    padding: 10px 14px;
    font-size: 14px;
    border-radius: 14px;
  }

  .msg {
    margin: 10px 0;
  }

  .msg.assistant .bubble {
    border-radius: 4px 14px 14px 4px;
  }

  .msg.user .bubble {
    border-radius: 14px 4px 4px 14px;
  }

  /* --- Citations & sources: compact --- */
  .citations {
    padding: 6px 8px;
    font-size: 11px;
  }

  .sourceReferences {
    max-width: 100%;
    padding: 6px 0 6px 8px;
  }

  .sourceToggleBtn {
    font-size: 11px;
  }

  .sourceIndicator {
    padding: 6px 10px;
    font-size: 12px;
    gap: 6px;
  }

  /* --- Cards: tighter padding --- */
  .card {
    padding: 14px;
    border-radius: var(--radius);
  }

  .cardHeader {
    margin-bottom: 10px;
    gap: 8px;
  }

  .cardTitle {
    font-size: 16px;
  }

  /* --- Modals --- */
  .modalContent {
    width: 98%;
    max-height: 92vh;
    border-radius: var(--radius);
  }

  .modalHeader {
    padding: 14px 16px;
  }

  .modalTitle {
    font-size: 20px;
  }

  .modalBody {
    padding: 14px 16px;
  }

  .modalFooter {
    padding: 12px 16px;
  }

  /* --- Research controls --- */
  .researchControls textarea {
    min-height: 90px;
    font-size: 14px;
  }

  /* --- Activity rows --- */
  .activityRow {
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    padding: 10px;
  }

  .activityIcon {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  /* --- Status line --- */
  .statusLine {
    flex-wrap: wrap;
    padding: 8px 10px;
    gap: 6px;
  }

  /* --- Files table: simplified --- */
  .fileRow {
    padding: 10px 12px;
    font-size: 13px;
  }

  /* --- Attachment cards --- */
  .attachmentCard {
    max-width: 100%;
  }

  /* --- Draft cards --- */
  .draftCard {
    padding: 10px 12px;
  }

  /* --- Grounding footer --- */
  .groundingFooter {
    font-size: 11px;
  }

  /* --- Composer adjustments --- */
  .composerWrapper {
    border-radius: var(--radius) var(--radius) 0 0;
  }

  .chatgptComposer {
    font-size: 14px;
  }

  /* --- Secondary nav --- */
  .secondaryNavRow {
    padding: 6px 10px;
    gap: 8px;
  }

  .secondaryTab {
    padding: 5px 12px;
    font-size: 11px;
  }

  .secondaryTabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 1;
    min-width: 0;
  }

  .secondaryTabs::-webkit-scrollbar {
    display: none;
  }

  .secondaryTab {
    flex-shrink: 0;
  }
}

/* ==================== PHONE (≤480px) ==================== */
@media (max-width: 480px) {
  /* --- Full-bleed layout --- */
  .appShell {
    padding: 0;
    max-width: 100%;
  }

  .topBar {
    border-radius: 0;
    padding: 6px 10px;
    gap: 6px;
  }

  .topBar::before {
    display: none;
  }

  .brand {
    gap: 8px;
  }

  .logo {
    width: 28px;
    height: 28px;
    font-size: 13px;
    border-radius: 7px;
  }

  .brandTitle {
    font-size: 15px;
  }

  /* --- Assistant switcher: ultra-compact inline --- */
  .assistantTabsBar {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 2px 4px;
    padding: 0;
  }

  .assistantSwitcherLabel {
    display: none;
  }

  .assistantTab {
    padding: 5px 8px;
    border-radius: 8px;
    gap: 5px;
    min-height: unset;
  }

  .assistantTabName {
    font-size: 11px;
  }

  .assistantTabRole {
    display: none;
  }

  .assistantAvatar {
    width: 24px;
    height: 24px;
    border-radius: 6px;
  }

  /* --- Primary nav: pill scrollable --- */
  .primaryNav {
    border-radius: 0;
    padding: 2px 2px;
    margin-top: 0;
    gap: 4px;
  }

  .primaryNavTab {
    padding: 5px 12px;
    font-size: 12px;
  }

  /* --- Chat area: full bleed --- */
  .layout {
    margin-top: 0;
    gap: 0;
  }

  .chatCard {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  /* --- Chat bubbles: full width on phone --- */
  .bubble {
    max-width: 94%;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.55;
    border-radius: 12px;
  }

  .msg {
    margin: 8px 0;
  }

  .msg.assistant .bubble {
    border-radius: 4px 12px 12px 4px;
    border-left-width: 2px;
  }

  .msg.user .bubble {
    border-radius: 12px 4px 4px 12px;
    border-right-width: 2px;
  }

  .modeBadge {
    font-size: 9px;
    padding: 2px 8px;
  }

  /* --- Composer: pinned to bottom --- */
  .composerWrapper {
    border-radius: 0;
    padding: 6px 8px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    min-height: 56px;
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
  }

  .chatgptComposer {
    padding: 8px 10px;
    border-radius: 12px;
    gap: 6px;
    font-size: 14px;
  }

  .chatgptComposer textarea {
    font-size: 16px; /* prevents iOS zoom on focus */
    min-height: 40px;
    max-height: 160px;
  }

  .circleBtn {
    width: 30px;
    height: 30px;
  }

  /* --- Citations & sources stacked --- */
  .citations {
    padding: 6px 8px;
    margin-top: 6px;
  }

  .citationsTitle {
    font-size: 10px;
  }

  .citationItem {
    font-size: 11px;
    margin-bottom: 4px;
  }

  .sourceReferences {
    max-width: 100%;
    padding: 6px 0 6px 8px;
  }

  .sourceToggleBtn {
    font-size: 11px;
    padding: 4px 0;
  }

  .sourceIndicator {
    padding: 6px 8px;
    font-size: 11px;
    border-radius: 8px;
  }

  /* --- Sidebar overlay full-screen on phone --- */
  .sidebar {
    top: 0 !important;
    width: 85vw !important;
    min-width: 85vw !important;
    max-width: 85vw !important;
    border-radius: 0;
    box-shadow: 4px 0 24px rgba(0,0,0,0.15);
  }

  /* --- Cards: minimal padding --- */
  .card {
    padding: 10px;
    border-radius: 8px;
  }

  .cardTitle {
    font-size: 15px;
  }

  .cardSub {
    font-size: 12px;
  }

  /* --- Modals & drawers: full screen on phone --- */
  .modalContent {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }

  .drawerContent {
    width: 100%;
    max-width: 100%;
  }

  .drawerHeader {
    padding: 12px 16px;
  }

  .drawerActions {
    padding: 10px 16px;
    gap: 8px;
  }

  .historyList {
    padding: 10px 12px;
  }

  .historyItem {
    padding: 10px 12px;
    margin-bottom: 8px;
  }

  .historyItemTitle {
    font-size: 13px;
  }

  /* --- Drafting layout --- */
  .draftingLayout {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .draftsPanel {
    width: 90vw !important;
    max-width: 90vw !important;
  }

  /* --- Upload area compact --- */
  .uploadDropZone {
    padding: 14px 8px;
  }

  .dropZoneText {
    font-size: 12px;
  }

  /* --- Activity rows compact --- */
  .activityRow {
    padding: 8px;
    gap: 6px;
  }

  .activityTitle {
    font-size: 12px;
  }

  .activitySub {
    font-size: 11px;
  }

  /* --- Status chips compact --- */
  .statusChip {
    font-size: 9px;
    padding: 2px 6px;
  }

  /* --- Empty state compact --- */
  .emptyState {
    padding: 24px 16px;
  }

  .emptyIcon {
    font-size: 24px;
  }

  /* --- Inline buttons compact --- */
  .btn {
    font-size: 12px;
    padding: 6px 12px;
  }

  .btn.sm {
    padding: 4px 8px;
    font-size: 11px;
  }

  /* --- Search filter --- */
  .searchFilter {
    padding: 8px 10px;
    margin-bottom: 12px;
  }

  .searchFilter input {
    font-size: 16px; /* prevent iOS zoom */
  }

  /* --- Status line --- */
  .statusLine {
    padding: 6px 8px;
    border-radius: 8px;
  }

  .statusLabel {
    font-size: 12px;
  }

  .statusState {
    font-size: 11px;
    padding: 4px 8px;
  }

  /* --- Attachment cards --- */
  .attachmentCard {
    max-width: 100%;
    padding: 6px 8px;
  }

  .attachmentName {
    font-size: 11px;
  }

  /* --- Files table --- */
  .filesTableHeader {
    padding: 8px 10px;
  }

  .fileRow {
    padding: 8px 10px;
    font-size: 12px;
  }

  .fileColStatus {
    display: none;
  }

  /* --- Conversation card --- */
  .conversationCard {
    border-radius: 10px;
  }

  /* --- Research error compact --- */
  .researchError {
    padding: 8px;
    font-size: 12px;
    border-radius: 6px;
  }

  /* --- Logs table scrollable --- */
  .logsTable {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .logsTable table {
    min-width: 500px;
  }
}

/* ==================== SMALL PHONE (≤360px) ==================== */
@media (max-width: 360px) {
  .topBar {
    padding: 6px 8px;
  }

  .brandTitle {
    font-size: 14px;
  }

  .logo {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .assistantTab {
    padding: 5px 6px;
  }

  .assistantTabName {
    font-size: 10px;
  }

  .primaryNavTab {
    padding: 6px 10px;
    font-size: 11px;
  }

  .bubble {
    max-width: 96%;
    padding: 8px 10px;
    font-size: 13px;
  }

  .composerWrapper {
    min-height: 50px;
    padding: 4px 6px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  }

  .chatgptComposer {
    padding: 6px 8px;
    gap: 4px;
    border-radius: 10px;
  }

  .circleBtn {
    width: 28px;
    height: 28px;
  }
}

/* ==================== KEYBOARD AVOIDANCE (mobile) ==================== */
/* When virtual keyboard opens, the viewport shrinks.
   Using dvh ensures the chat layout adapts. */
@media (max-width: 768px) {
  .chatCard {
    min-height: max(280px, calc(100dvh - 160px));
  }
}

/* ==================== TOUCH TARGETS ==================== */
/* Ensure all interactive elements meet 44px minimum on touch */
@media (pointer: coarse) {
  .primaryNavTab {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .secondaryTab {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  .assistantTab {
    min-height: 44px;
  }

  .iconBtn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .circleBtn {
    min-width: 44px;
    min-height: 44px;
  }

  .sourceToggleBtn {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  .historyItem {
    min-height: 48px;
  }

  .activityDelete {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
  }

  .btn {
    min-height: 40px;
  }

  .btn.sm {
    min-height: 36px;
  }
}

/* ==================== REDUCED MOTION ==================== */
@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .layout,
  .card,
  .drawerContent,
  .assistantTab,
  .btn,
  .primaryNavTab,
  .historyItem {
    transition: none !important;
    animation: none !important;
  }
}

/* ==================== LANDSCAPE PHONE ==================== */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .topBar {
    padding: 4px 12px;
  }

  .logo {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .brandTitle {
    font-size: 15px;
  }

  .assistantTabsBar {
    margin: 2px 0;
    gap: 4px;
  }

  .assistantTab {
    padding: 3px 8px;
    min-height: 28px;
  }

  .assistantTabRole {
    display: none;
  }

  .brandSub,
  .brandDetail {
    display: none;
  }

  .primaryNav {
    padding: 2px 2px;
    margin-top: 1px;
  }

  .primaryNavTab {
    padding: 3px 12px;
    min-height: 26px;
    font-size: 12px;
  }

  .chatCard {
    min-height: max(180px, calc(100dvh - 80px));
  }

  .composerWrapper {
    min-height: 44px;
    padding: 3px 8px;
  }
}

/* Outer Page Scroll block removed — contained flex scrolling is used instead */

#app-modal-root,
#toast-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1200;
}

#toast-root {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  padding: 20px;
}

.appModalBackdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: auto;
  transition: opacity 150ms ease;
}

.appModalBackdrop.isVisible {
  opacity: 1;
}

.appModalCard {
  width: min(100%, 420px);
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.18);
  padding: 22px;
  transform: scale(0.95) translateY(8px);
  transition: transform 150ms ease, opacity 150ms ease;
  outline: none;
}

.appModalBackdrop.isVisible .appModalCard {
  transform: scale(1) translateY(0);
}

.appModalCard--destructive {
  border-color: rgba(239, 68, 68, 0.12);
}

.appModalHeader {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.appModalTitle {
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
  color: #0f172a;
}

.appModalMessage {
  font-size: 14px;
  line-height: 1.55;
  color: #475569;
}

.appModalInputWrap {
  margin-bottom: 18px;
}

.appModalInput {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(248, 250, 252, 0.96);
  color: #0f172a;
  font: inherit;
  font-size: 14px;
}

.appModalInput:focus {
  outline: none;
  border-color: rgba(15, 23, 42, 0.24);
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
}

.appModalActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.appModalActions .btn.loading {
  opacity: 0.72;
  cursor: wait;
}

.uploadRoutingModal {
  width: min(100%, 560px);
}

.uploadRoutingOptions {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.uploadRoutingOption {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: rgba(248, 245, 239, 0.9);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.uploadRoutingOption:hover {
  border-color: rgba(201, 148, 29, 0.34);
  box-shadow: 0 10px 22px rgba(127, 107, 82, 0.12);
  transform: translateY(-1px);
}

.uploadRoutingOptionTitle {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.uploadRoutingOptionBody {
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280;
}

.chatAttachmentItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.chatAttachmentItem:last-child {
  border-bottom: none;
}

.chatAttachmentMeta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chatAttachmentName {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatAttachmentSubtext {
  font-size: 12px;
  color: #8a7a63;
}

.chatAttachmentActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chatAttachmentAction {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: #fff;
  color: #5b4b3b;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.chatAttachmentAction:hover {
  border-color: rgba(201, 148, 29, 0.32);
  color: #3f3328;
}

.activeChatFilesBar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  flex-wrap: wrap;
}

.activeChatFilesLabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a7a63;
}

.activeChatFilesList {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.activeChatFileChipWrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.activeChatFileChip,
.activeChatFileMore {
  border: 1px solid rgba(127, 95, 51, 0.14);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248, 241, 232, 0.84));
  color: #4f3f2f;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.activeChatFileChip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.activeChatFileChip:hover,
.activeChatFileMore:hover {
  border-color: rgba(201, 148, 29, 0.32);
  transform: translateY(-1px);
}

.activeChatFileChipName {
  display: inline-block;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.activeChatFileChipBadge,
.chatAttachmentStatus {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(201, 148, 29, 0.14);
  color: #93651a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.activeChatFileRemove {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(127, 95, 51, 0.14);
  border-radius: 999px;
  background: rgba(255,255,255,0.88);
  color: #7c6850;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.activeChatFileRemove:hover {
  border-color: rgba(185, 28, 28, 0.24);
  color: #991b1b;
  background: rgba(254, 242, 242, 0.94);
}

.chatAttachmentAction.danger:hover {
  border-color: rgba(185, 28, 28, 0.24);
  color: #991b1b;
}

/* ========== Pending Attach Bar (inline chip row above composer) ========== */
.pendingAttachBar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 0;
  flex-wrap: wrap;
}

.pendingAttachBar.hidden {
  display: none;
}

/* Individual pending file chip */
.pendingChip {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(127, 95, 51, 0.18);
  border-radius: 12px;
  background: linear-gradient(160deg, #fff 60%, rgba(248, 241, 232, 0.9));
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  transition: box-shadow 0.18s ease;
  max-width: 420px;
}

.pendingChip:hover {
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1);
}

.pendingChipIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(201, 148, 29, 0.09);
  color: #93651a;
  flex-shrink: 0;
}

.pendingChipName {
  font-size: 12.5px;
  font-weight: 600;
  color: #3f3328;
  padding: 0 10px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
}

/* Route toggle pills inside chip */
.pendingChipActions {
  display: inline-flex;
  align-items: center;
  border-left: 1px solid rgba(127, 95, 51, 0.12);
  padding: 0 2px;
  gap: 2px;
  background: rgba(248, 241, 232, 0.5);
}

.pendingChipBtn {
  font-size: 11px;
  font-weight: 600;
  padding: 6px 9px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #8a7a63;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.pendingChipBtn:hover {
  background: rgba(201, 148, 29, 0.1);
  color: #7a5c1e;
}

.pendingChipBtn.active {
  background: rgba(201, 148, 29, 0.15);
  color: #6b4f12;
  font-weight: 700;
}

.pendingChipSaveMenu {
  position: absolute;
  z-index: 400;
  margin-top: 4px;
  background: #fff;
  border: 1px solid rgba(127, 95, 51, 0.16);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
  padding: 6px;
  min-width: 200px;
  animation: menuFadeIn 0.14s ease;
}

@keyframes menuFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pendingChipSaveOption {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: background 0.14s ease;
}

.pendingChipSaveOption:hover {
  background: rgba(248, 241, 232, 0.8);
}

.pendingChipSaveOption .pcsTitle {
  font-size: 12.5px;
  font-weight: 600;
  color: #3f3328;
  display: block;
  line-height: 1.3;
}

.pendingChipSaveOption .pcsDesc {
  font-size: 11px;
  color: #9a8a76;
  display: block;
  line-height: 1.3;
  margin-top: 1px;
}

.pendingChipSaveOption svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: #9a8a76;
}

.pendingChipRemove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 36px;
  border: none;
  border-left: 1px solid rgba(127, 95, 51, 0.1);
  background: transparent;
  color: #a89070;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}

.pendingChipRemove:hover {
  color: #991b1b;
  background: rgba(254, 242, 242, 0.7);
}

.pendingChipUploading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #93651a;
  padding: 0 10px;
}

@keyframes spin { to { transform: rotate(360deg); } }
.pendingChipSpinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(201, 148, 29, 0.25);
  border-top-color: #c9941d;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* ========== Library Drawer — new case row ========== */
.libraryNewCaseRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 4px;
  border-bottom: 1px solid rgba(127, 95, 51, 0.08);
}

.libraryNewCaseInput {
  flex: 1;
  font-size: 12.5px;
  padding: 7px 10px;
  border: 1px solid rgba(127, 95, 51, 0.18);
  border-radius: 8px;
  background: rgba(248, 241, 232, 0.5);
  color: #3f3328;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.libraryNewCaseInput:focus {
  border-color: rgba(201, 148, 29, 0.5);
  box-shadow: 0 0 0 3px rgba(201, 148, 29, 0.08);
}

.libraryNewCaseInput::placeholder {
  color: #b8a898;
}

/* Drawer header actions row */
.drawerHeaderActions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.appToast {
  min-width: 220px;
  max-width: min(420px, calc(100vw - 40px));
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
  color: #0f172a;
  font-size: 13px;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: auto;
}

.appToastBody {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.appToastMessage {
  min-width: 0;
}

.appToastAction {
  appearance: none;
  border: 0;
  background: transparent;
  color: #0f172a;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0;
  cursor: pointer;
  opacity: 0.76;
  transition: opacity 140ms ease, transform 140ms ease;
  flex-shrink: 0;
}

.appToastAction:hover,
.appToastAction:focus-visible {
  opacity: 1;
}

.appToastAction:active {
  transform: translateY(1px);
}

.appToast.isVisible {
  opacity: 1;
  transform: translateY(0);
}

.appToast--success {
  border-color: rgba(16, 185, 129, 0.18);
  background: rgba(240, 253, 250, 0.98);
}

.appToast--error {
  border-color: rgba(239, 68, 68, 0.18);
  background: rgba(254, 242, 242, 0.98);
}

.appToast--info {
  border-color: rgba(59, 130, 246, 0.16);
  background: rgba(239, 246, 255, 0.98);
}

.isPendingDelete {
  display: none !important;
}

@media (max-width: 768px) {
  #toast-root {
    align-items: stretch;
    padding: 14px;
  }

  .appModalBackdrop {
    padding: 16px;
  }

  .appModalCard {
    width: 100%;
    padding: 18px;
  }
}

/* ─── Bulk Select Mode ─── */

/* Toggle button in headers */
.bulkSelectToggle {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid var(--border-secondary, rgba(148,163,184,0.18));
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary, #64748b);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  line-height: 1.4;
}
.bulkSelectToggle:hover {
  background: var(--bg-hover, rgba(148,163,184,0.08));
  color: var(--text-primary, #1e293b);
  border-color: var(--border-primary, rgba(148,163,184,0.3));
}

/* Drawer select toggles — icon-only style */
.drawerSelectToggle {
  width: 32px;
  height: 32px;
  min-width: unset;
  padding: 0;
  justify-content: center;
  border-color: transparent;
  color: var(--text-tertiary, #94a3b8);
  opacity: 0.6;
}
.drawerSelectToggle:hover {
  opacity: 1;
  border-color: var(--border-secondary, rgba(148,163,184,0.15));
}

/* Checkbox labels — hidden by default */
.bulkSelectLabel {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
}
/* Show checkboxes only in bulk select mode */
.bulkSelectMode.bulkSelect--chats .chatItem .bulkSelectLabel,
.bulkSelectMode.bulkSelect--chats .activityRow .bulkSelectLabel,
.bulkSelectMode.bulkSelect--files .fileDrawerRow .bulkSelectLabel,
.bulkSelectMode.bulkSelect--cases .caseDrawerItem .bulkSelectLabel,
.bulkSelectMode.bulkSelect--library .filesDrawerCaseTitle .bulkSelectLabel,
.bulkSelectMode.bulkSelect--library .fileDrawerRow .bulkSelectLabel,
.bulkSelectMode.bulkSelect--library .caseDrawerItem .bulkSelectLabel {
  display: flex;
}

/* Hide individual delete/action buttons in bulk mode */
.bulkSelectMode.bulkSelect--chats .chatItem .hoverDeleteBtn,
.bulkSelectMode.bulkSelect--chats .chatItem .chatItemMore,
.bulkSelectMode.bulkSelect--chats .chatItem .chatItemActions,
.bulkSelectMode.bulkSelect--chats .activityRow .activityRowActions,
.bulkSelectMode.bulkSelect--files .fileDrawerRow .fileDrawerRowMenu,
.bulkSelectMode.bulkSelect--files .fileDrawerRow .hoverDeleteBtn,
.bulkSelectMode.bulkSelect--cases .caseDrawerItem .caseDrawerItemControls,
.bulkSelectMode.bulkSelect--cases .caseDrawerItem .hoverDeleteBtn,
.bulkSelectMode.bulkSelect--library .fileDrawerRow .fileDrawerRowMenu,
.bulkSelectMode.bulkSelect--library .fileDrawerRow .hoverDeleteBtn,
.bulkSelectMode.bulkSelect--library .caseDrawerItem .caseDrawerItemControls,
.bulkSelectMode.bulkSelect--library .caseDrawerItem .hoverDeleteBtn {
  display: none !important;
}

/* Subtle highlight on selected items */
.bulkSelectMode .chatItem .bulkSelectCheck:checked ~ .chatItemContent,
.bulkSelectMode .fileDrawerRow:has(.bulkSelectCheck:checked),
.bulkSelectMode .filesDrawerCaseTitle:has(.bulkSelectCheck:checked),
.bulkSelectMode .caseDrawerItem:has(.bulkSelectCheck:checked) {
  background: rgba(201, 148, 29, 0.09);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(201, 148, 29, 0.18);
}

/* Checkbox: premium amber accent */
.bulkSelectCheck {
  width: 15px;
  height: 15px;
  accent-color: #c9941d;
  cursor: pointer;
  margin: 0;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════
   Premium Bulk Action Bar
   ═══════════════════════════════════════════ */
.bulkActionBar {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 680px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px 10px 16px;
  background: rgba(15, 18, 28, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  z-index: 2000;
  animation: bulkBarSlideUp 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.32),
    0 8px 16px rgba(0, 0, 0, 0.18),
    0 0 0 0.5px rgba(255, 255, 255, 0.04) inset;
  backdrop-filter: blur(20px);
}

@keyframes bulkBarSlideUp {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);   opacity: 1; }
}

.bulkActionMeta,
.bulkActionTools,
.bulkActionMain {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.bulkActionMeta {
  gap: 10px;
}

/* Count badge */
.bulkActionCount {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #f1f5f9;
  white-space: nowrap;
}

.bulkActionCount::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c9941d;
  box-shadow: 0 0 0 3px rgba(201, 148, 29, 0.2);
  flex-shrink: 0;
}

/* Divider between groups */
.bulkActionDivider {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

/* Secondary buttons (Select all / Clear) */
.bulkActionSecondary {
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}

.bulkActionSecondary:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #e2e8f0;
  border-color: rgba(255, 255, 255, 0.16);
}

.bulkActionSecondary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Delete button — amber-to-red premium */
.bulkActionDelete {
  padding: 7px 16px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(185, 28, 28, 0.35);
  white-space: nowrap;
}

.bulkActionDelete:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(185, 28, 28, 0.45);
}

.bulkActionDelete:active:not(:disabled) {
  transform: translateY(0);
}

.bulkActionDelete:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* Done / Cancel button */
.bulkActionCancel {
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  background: transparent;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}

.bulkActionCancel:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  border-color: rgba(255, 255, 255, 0.14);
}

/* ═══════════════════════════════════════════════
   RESPONSIVE OPTIMIZATION LAYER
   Fixes touch accessibility, panel adaptation,
   and premium feel across all device sizes.
   ═══════════════════════════════════════════════ */

/* ─── 1. TOUCH DEVICE: Always-visible action buttons ─── */
@media (hover: none), (pointer: coarse) {
  /* Override hover-only opacity for all interactive row actions */
  .hoverDeleteBtn,
  .chatItemMore,
  .caseMenuBtn,
  .caseDrawerDeleteBtn,
  .fileDrawerRowMenu {
    opacity: 0.65 !important;
  }
  .chatItem:active .hoverDeleteBtn,
  .chatItem:active .chatItemMore,
  .fileDrawerRow:active .fileDrawerRowMenu,
  .caseDrawerItem:active .caseDrawerDeleteBtn,
  .caseDrawerItem:active .caseMenuBtn,
  .activityRow:active .hoverDeleteBtn,
  .draftCard:active .hoverDeleteBtn {
    opacity: 1 !important;
  }
}

/* ─── 2. TABLET (≤980px): Panel & workspace refinements ─── */
@media (max-width: 980px) {
  /* Top bar: tighter icon gaps */
  .topActions {
    gap: 4px;
  }

  /* Case workspace panel: tighter padding */
  .caseWorkspacePanel {
    border-radius: 14px;
  }
  .caseWorkspaceEmpty {
    margin: 16px 14px;
    padding: 20px 16px;
  }
  .caseWorkspaceContent {
    padding: 14px;
  }
  .caseSourceGrid {
    grid-template-columns: 1fr;
  }

  /* Workspace panel composer: adapt */
  .workspacePanelComposer {
    gap: 8px;
    max-width: 100%;
  }

  /* Bulk action bar: responsive */
  .bulkActionBar {
    padding: 10px 16px;
    gap: 8px;
  }

  /* Sidebar backdrop: ensure click-to-close works */
  .sidebar::before {
    cursor: pointer;
  }
}

/* ─── 3. SMALL TABLET (≤768px): Tighter panel actions ─── */
@media (max-width: 768px) {
  .collaborationParticipants {
    grid-template-columns: 1fr;
  }

  .collaborationFlowCard {
    padding: 14px;
  }

  .sidebarTopActions {
    gap: 8px;
    margin-bottom: 12px;
  }

  .sidebarSelectToggle {
    width: 30px;
    height: 30px;
    min-width: unset;
    padding: 0;
  }

  /* Top bar icons: smaller gap, consistent sizing */
  .topActions {
    gap: 2px;
  }
  .topActions .iconBtn {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  /* Case workspace meta: stack on narrow */
  .caseWorkspaceMeta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .caseMetaActions {
    width: 100%;
  }
  .caseMetaActions .btn {
    flex: 1;
    justify-content: center;
  }

  /* Case workspace: reduce margins */
  .caseWorkspaceEmpty {
    margin: 12px 10px;
    padding: 16px 12px;
    max-width: 100%;
  }
  .caseWorkspaceContent {
    padding: 10px;
  }

  /* Chat messages: reduce side padding */
  .chatMessagesWrapper {
    padding: 14px 12px;
  }

  /* Linked case bar: compact */
  .linkedCaseBar {
    padding: 6px 10px;
    gap: 6px;
  }

  /* Files drawer sections: tighter */
  .filesDrawerSectionHeader {
    padding: 8px 14px;
    font-size: 11px;
  }
  .filesDrawerList {
    padding: 4px 10px;
  }

  /* Workspace panel composer: stack vertically */
  .workspacePanelComposer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .workspacePanelComposer textarea {
    font-size: 16px; /* prevent iOS zoom */
  }

  /* Bulk action bar: compact on tablets */
  .bulkActionBar {
    bottom: 12px;
    width: calc(100% - 32px);
    padding: 9px 12px;
    gap: 6px;
  }

  /* Bulk select toggle button: smaller */
  .bulkSelectToggle {
    padding: 3px 10px;
    font-size: 11px;
  }
}

/* ─── 4. PHONE (≤480px): Full-bleed, maximum usability ─── */
@media (max-width: 480px) {
  .collaborationFlowHeader,
  .collaborationTimelineTop {
    flex-direction: column;
    align-items: flex-start;
  }

  .collaborationFlowPill,
  .collaborationTimelineBadge {
    white-space: normal;
  }

  .sidebarTopActions {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-bottom: 8px;
    background: linear-gradient(180deg, rgba(248, 247, 244, 0.98), rgba(248, 247, 244, 0.88));
  }

  .sidebarTopActions .newChatBtn {
    padding-inline: 12px;
  }

  .sidebarSelectToggle {
    min-width: 60px;
  }

  /* Top bar icons: minimal spacing */
  .topActions {
    gap: 0;
  }
  .topActions .iconBtn {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }

  /* Chat messages: tighter */
  .chatMessagesWrapper {
    padding: 10px 8px;
  }

  /* Case workspace: full bleed */
  .caseWorkspacePanel {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .caseWorkspaceEmpty {
    margin: 8px;
    padding: 14px 10px;
  }
  .caseWorkspaceContent {
    padding: 8px;
  }
  .caseWorkspaceMeta {
    padding: 0 0 8px;
    gap: 6px;
  }
  .caseMetaActions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .caseMetaActions .btn {
    padding: 5px 10px;
    font-size: 11px;
  }

  /* Case drawer items: ensure controls visible */
  .caseDrawerItem {
    padding: 8px 10px;
  }

  /* File drawer rows: compact */
  .fileDrawerRow {
    padding: 8px 10px;
    gap: 6px;
  }

  /* Panel composer */
  .workspacePanelComposer {
    padding: 6px 8px;
    gap: 6px;
  }

  /* Bulk action bar: tighter on phones */
  .bulkActionBar {
    bottom: 8px;
    width: calc(100% - 24px);
    padding: 8px 10px;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .bulkActionDivider {
    display: none;
  }

  /* Bulk select label: smaller */
  .bulkSelectLabel {
    width: 24px;
    height: 24px;
  }
  .bulkSelectCheck {
    width: 14px;
    height: 14px;
  }

  /* Drawer header: compact */
.drawerHeader .bulkSelectToggle {
    padding: 2px 8px;
    font-size: 10px;
  }
}

/* ========================================
   Drawer Polish Refresh
   ======================================== */
.drawerOverlay {
  background: rgba(15, 23, 42, 0.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.drawerContent,
.attachmentsDrawerContent {
  background:
    radial-gradient(circle at top right, rgba(201, 148, 29, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(252, 247, 240, 0.98), rgba(247, 240, 231, 0.96));
  border-left: 1px solid rgba(127, 95, 51, 0.12);
  box-shadow: -18px 0 42px rgba(15, 23, 42, 0.16);
  overflow: hidden;
}

.drawerHeader {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(127, 95, 51, 0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.38), rgba(255,255,255,0.1));
  backdrop-filter: blur(10px);
}

.drawerHeaderActions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex: 0 0 auto;
}

.drawerHeader .cardTitle {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #231d17;
}

.drawerHeader .iconBtn,
.drawerHeader .bulkSelectToggle {
  border-radius: 12px;
  background: rgba(255,255,255,0.34);
  border: 1px solid rgba(127, 95, 51, 0.1);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

@media (max-width: 840px) {
  .drawerHeader .cardTitle {
    flex: 1 1 100%;
    min-width: 0;
  }

  .drawerHeaderActions {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }

  .drawerHeader .bulkSelectToggle {
    min-width: 74px;
  }
}

.drawerActions {
  padding: 12px 20px 14px;
  gap: 10px;
  border-bottom: 1px solid rgba(127, 95, 51, 0.09);
  background: rgba(255,255,255,0.08);
}

.drawerActions--history {
  align-items: center;
  justify-content: space-between;
}

.drawerActions--history.isSelectionMode {
  gap: 12px;
}

.drawerSelectionSummary {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #6a583f;
}

.drawerSelectionActions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.viewAllChatsBtn {
  width: 100%;
  margin-top: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(127, 95, 51, 0.12);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(248, 241, 232, 0.7));
  color: #6f5737;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.viewAllChatsBtn:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(249, 242, 234, 0.9));
  border-color: rgba(201, 148, 29, 0.22);
  color: #8b6d34;
  transform: translateY(-1px);
}

.drawerActions .btn,
.drawerActions .drawerInput {
  border-radius: 12px;
}

.historyList,
.draftsList,
.filesDrawerBody {
  padding-left: 18px;
  padding-right: 18px;
}

.historySectionHeader,
.filesDrawerSectionHeader {
  color: #7c6b52;
  letter-spacing: 0.08em;
}

.historySection + .historySection {
  margin-top: 24px;
}

.historyCaseGroup,
.filesDrawerCaseGroup {
  border: 1px solid rgba(127, 95, 51, 0.12);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(248, 241, 232, 0.74));
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.historyItem,
.draftItem,
.fileDrawerRow {
  border: 1px solid rgba(127, 95, 51, 0.12);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(248, 241, 232, 0.72));
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.045);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.historyDrawer.historySelectionMode .historyItem .bulkSelectLabel,
#historyDrawer.historySelectionMode .historyItem .bulkSelectLabel {
  display: flex;
}

#historyDrawer.historySelectionMode .historyItemPin,
#historyDrawer.historySelectionMode .historyItemDelete {
  opacity: 0;
  pointer-events: none;
}

#historyDrawer.historySelectionMode .historyItemActions {
  display: none;
}

#historyDrawer.historySelectionMode .historyItem:has(.bulkSelectCheck:checked) {
  border-color: rgba(201, 148, 29, 0.28);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(251, 245, 236, 0.94));
}

.historyItem:hover,
.draftItem:hover,
.fileDrawerRow:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250, 244, 236, 0.92));
  border-color: rgba(201, 148, 29, 0.26);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.historyItemContent {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.historyItemHeaderRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.historyItemTitle,
.draftItemTitle {
  color: #201a15;
  font-weight: 700;
}

.historyItemTitle {
  line-height: 1.35;
  margin-bottom: 0;
}

.historyItemPreview,
.draftItemPreview {
  font-size: 13px;
  line-height: 1.52;
  color: #4d443a;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.historyItemPreview {
  -webkit-line-clamp: 1;
}

.historyItemPreviewExpanded {
  display: none;
  font-size: 13px;
  line-height: 1.58;
  color: #3f372f;
}

.historyItem.isExpanded .historyItemPreview {
  display: none;
}

.historyItem.isExpanded .historyItemPreviewExpanded {
  display: block;
}

.historyItemDetailMeta {
  display: none;
  font-size: 11px;
  line-height: 1.45;
  color: #8b7c67;
}

.historyItem.isExpanded .historyItemDetailMeta {
  display: block;
}

.historyExpandBtn {
  align-self: flex-start;
  border: 0;
  background: transparent;
  padding: 0;
  color: #8b6d34;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.historyExpandBtn:hover {
  color: #a97c22;
}

.historyItemMeta,
.historyCaseGroupMeta,
.fileDrawerRowMeta {
  color: #7f6f5c;
}

.historyLabelChip {
  border-color: rgba(127, 95, 51, 0.1);
  background: rgba(205, 185, 146, 0.18);
  color: #5e4b32;
}

.historyItemActions {
  padding-top: 2px;
}

.historyItemPin {
  background: rgba(205, 185, 146, 0.18);
}

.draftsList {
  gap: 12px;
  padding-top: 16px;
}

.draftItemPreview {
  -webkit-line-clamp: 2;
  margin-top: 6px;
}

.draftItemStatus {
  border-radius: 999px;
  padding: 4px 9px;
  width: fit-content;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.filesDrawerSection {
  margin-bottom: 22px;
}

.filesDrawerSectionHeader {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(127, 95, 51, 0.08);
}

.filesDrawerList,
.filesDrawerCases,
.filesDrawerCaseFiles {
  gap: 10px;
}

.filesDrawerCaseTitle {
  padding: 12px 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #2f2a24;
  background: rgba(255, 255, 255, 0.38);
  border-bottom: 1px solid rgba(127, 95, 51, 0.08);
}

.fileDrawerRow {
  padding: 12px;
  gap: 10px;
}

.fileDrawerRowIcon {
  color: #8b7c67;
}

.fileDrawerRowBody {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.fileDrawerRowName {
  font-weight: 600;
  color: #201a15;
}

.fileDrawerRowMeta {
  font-size: 11px;
  letter-spacing: 0.01em;
}

.fileDrawerRowMenu {
  opacity: 1;
}

.historySectionEmpty,
.emptyFilesState {
  border: 1px dashed rgba(127, 95, 51, 0.14);
  background: rgba(255,255,255,0.38);
  border-radius: 16px;
  color: #7c6b52;
}

.filesDrawerFooter {
  border-top-color: rgba(127, 95, 51, 0.10);
  background: rgba(248, 241, 232, 0.55);
}

.storageBar {
  background: rgba(127, 95, 51, 0.08);
  border-radius: 4px;
  height: 5px;
}

.storageBarFill {
  background: linear-gradient(90deg, #c9941d, #a97c22);
}

.storageLabel {
  color: #7f6f5c;
}

/* ========================================
   MICRO-INTERACTIONS & MOTION POLISH
   Premium feel: smooth transitions, subtle
   feedback, no abrupt state changes.
   ======================================== */

/* ─── PART 1: Selection Mode ─── */

/* Checkboxes fade+scale in when selection mode activates */
.historySelectionMode .bulkSelectLabel,
.bulkSelectMode.bulkSelect--chats .bulkSelectLabel,
.bulkSelectMode.bulkSelect--files .bulkSelectLabel,
.bulkSelectMode.bulkSelect--cases .bulkSelectLabel,
.bulkSelectMode.bulkSelect--library .bulkSelectLabel {
  animation: checkboxReveal 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes checkboxReveal {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* Selection mode action bar smooth crossfade */
.drawerActions {
  transition: background 0.2s ease, padding 0.2s ease;
}

.drawerSelectionSummary {
  animation: fadeSlideIn 0.2s ease both;
}

.drawerSelectionActions {
  animation: fadeSlideIn 0.22s ease 0.04s both;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Selected item highlight pulse */
.historyItem.isSelected,
.historySelectionMode .historyItem:has(.bulkSelectCheck:checked) {
  background: linear-gradient(180deg, rgba(201, 148, 29, 0.08), rgba(248, 241, 232, 0.85));
  border-color: rgba(201, 148, 29, 0.22);
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* ─── PART 2: Delete Animation ─── */

@keyframes itemDeleteOut {
  0%   { opacity: 1; transform: translateX(0); max-height: 200px; margin-bottom: 0; }
  40%  { opacity: 0.4; transform: translateX(-24px); }
  100% { opacity: 0; transform: translateX(-40px); max-height: 0; margin-bottom: -12px; padding-top: 0; padding-bottom: 0; overflow: hidden; }
}

.historyItem.isDeleting,
.chatItem.isDeleting,
.draftItem.isDeleting,
.fileDrawerRow.isDeleting,
.caseDrawerItem.isDeleting,
.draftCard.isDeleting {
  animation: itemDeleteOut 0.32s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}

/* ─── PART 3: Hover States (enhanced) ─── */

/* Card items: smooth lift */
.historyItem,
.draftItem,
.fileDrawerRow,
.chatItem,
.caseDrawerItem,
.draftCard {
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.18s ease,
              border-color 0.18s ease,
              background 0.18s ease;
}

/* Action buttons: smooth reveal */
.historyItemPin,
.historyItemDelete,
.hoverDeleteBtn,
.chatItemMore,
.chatItemActions,
.fileDrawerRowMenu {
  transition: opacity 0.18s ease, background 0.15s ease, transform 0.15s ease;
}

/* Pin/delete buttons subtle scale on hover */
.historyItemPin:hover,
.historyItemDelete:hover,
.hoverDeleteBtn:hover {
  transform: scale(1.08);
}

/* ─── PART 4: Expand / Collapse Animation ─── */

/* Expandable content: smooth height + fade */
.historyItemPreviewExpanded,
.historyItemDetailMeta {
  transition: opacity 0.22s ease, max-height 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.historyItem:not(.isExpanded) .historyItemPreviewExpanded,
.historyItem:not(.isExpanded) .historyItemDetailMeta {
  max-height: 0;
  opacity: 0;
  display: block;
  margin: 0;
  padding: 0;
}

.historyItem.isExpanded .historyItemPreviewExpanded {
  max-height: 300px;
  opacity: 1;
  display: block;
}

.historyItem.isExpanded .historyItemDetailMeta {
  max-height: 80px;
  opacity: 1;
  display: block;
}

/* Preview collapse: smooth line clamp to full */
.historyItemPreview {
  transition: opacity 0.15s ease;
}

.historyItem.isExpanded .historyItemPreview {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}

/* Expand button chevron rotation */
.historyExpandBtn::before {
  content: '›';
  display: inline-block;
  margin-right: 4px;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  transform: rotate(0deg);
}

.historyItem.isExpanded .historyExpandBtn::before {
  transform: rotate(90deg);
}

/* ─── PART 5: Drawer Transitions ─── */

/* Closing state: faster ease-in for natural feel */
.drawer.isClosing .drawerContent {
  transform: translateX(100%);
  opacity: 0.4;
  transition: transform 0.22s cubic-bezier(0.4, 0, 1, 1), opacity 0.22s ease;
}

.drawer.isClosing .drawerOverlay {
  opacity: 0;
  transition: opacity 0.22s ease;
}

/* ─── PART 6: Checkbox Behavior ─── */

/* Show checkbox on hover (desktop only) */
@media (hover: hover) and (pointer: fine) {
  .historyItem:hover .bulkSelectLabel,
  .chatItem:hover .bulkSelectLabel,
  .fileDrawerRow:hover .bulkSelectLabel,
  .filesDrawerCaseTitle:hover .bulkSelectLabel,
  .caseDrawerItem:hover .bulkSelectLabel {
    display: flex;
    animation: checkboxReveal 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

/* Checkbox check animation */
.bulkSelectCheck {
  transition: transform 0.12s ease;
}

.bulkSelectCheck:active {
  transform: scale(0.88);
}

/* ─── PART 7: Button Feedback ─── */

/* Subtle press: scale down on active */
.btn:active:not(:disabled) {
  transform: scale(0.97);
  transition: transform 0.08s ease;
}

.btn.primary:active:not(:disabled) {
  transform: scale(0.97);
  filter: brightness(0.95);
}

/* Drawer action buttons */
.drawerActions .btn:active:not(:disabled) {
  transform: scale(0.96);
}

/* Bulk action bar buttons */
.bulkActionDelete:active:not(:disabled),
.bulkActionCancel:active:not(:disabled) {
  transform: scale(0.96);
  transition: transform 0.08s ease;
}

/* Icon buttons press feedback */
.iconBtn:active,
.historyItemDelete:active,
.historyItemPin:active {
  transform: scale(0.9);
  transition: transform 0.08s ease;
}

/* History expand btn press */
.historyExpandBtn:active {
  opacity: 0.7;
}

/* ─── PART 8: Empty States ─── */

.emptyState {
  animation: emptyFadeIn 0.3s ease both;
}

.historySectionEmpty,
.emptyFilesState {
  animation: emptyFadeIn 0.3s ease both;
  text-align: center;
  padding: 20px 16px;
  font-size: 13px;
  line-height: 1.5;
}

@keyframes emptyFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── PART 9: Performance ─── */

/* GPU-accelerate animated elements */
.drawer .drawerContent,
.drawer .drawerOverlay,
.historyItem,
.chatItem,
.draftItem,
.fileDrawerRow,
.bulkSelectLabel,
.bulkActionBar {
  will-change: auto;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── 5. SMALL PHONE (≤360px): Extreme compact ─── */
@media (max-width: 360px) {
  /* Case meta actions: stack vertically */
  .caseMetaActions {
    flex-direction: column;
  }
  .caseMetaActions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Bulk action bar: stack if needed */
  .bulkActionBar {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ─── 6. WIDE DESKTOP (≥1600px): Balanced spacing ─── */
@media (min-width: 1600px) {
  .appShell {
    max-width: 1600px;
  }
  .bubble {
    max-width: min(800px, 65%);
  }
  .chatMessagesWrapper {
    padding: 24px 32px;
  }
  .caseWorkspaceContent {
    padding: 24px 32px;
  }
}

/* ─── 7. LANDSCAPE PHONE: Maximize content area ─── */
@media (orientation: landscape) and (max-height: 500px) {
  .composerWrapper {
    min-height: 44px;
    padding: 3px 8px;
    padding-bottom: calc(3px + env(safe-area-inset-bottom, 0px));
  }
  .chatgptComposer textarea {
    max-height: 60px;
  }
  .assistantTabsBar {
    margin: 1px 0;
    gap: 4px;
  }
  .assistantTab {
    padding: 3px 8px;
    min-height: 28px;
  }
  .assistantTabRole {
    display: none;
  }
  .assistantSwitcherLabel {
    display: none;
  }
  .primaryNav {
    margin-top: 0;
    padding: 2px;
  }
  .primaryNavTab {
    min-height: 26px;
    padding: 3px 12px;
    font-size: 12px;
  }
  .topBar {
    padding: 3px 10px;
  }
  .chatMessagesWrapper {
    padding: 6px 10px;
  }
}

/* ─── 8. PRINT: Clean output ─── */
@media print {
  .topBar, .sidebar, .composerWrapper, .primaryNav,
  .assistantTabsBar, .bulkActionBar, .drawer { display: none !important; }
  .appShell { max-width: 100%; padding: 0; height: auto; overflow: visible; }
  .layout { display: block; }
  .chatCard { border: none; box-shadow: none; }
  .chatMessagesWrapper { overflow: visible; max-height: none; }
}

.accessGateBody {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at top, rgba(205, 184, 154, 0.18), transparent 36%), #f5f1eb;
}

.accessGateShell {
  width: min(100%, 480px);
  padding: 24px;
}

.accessGateCard {
  background: rgba(255, 252, 247, 0.92);
  border: 1px solid rgba(112, 88, 60, 0.12);
  border-radius: 24px;
  box-shadow: 0 28px 80px rgba(60, 44, 28, 0.12);
  padding: 32px;
}

.accessGateBrand {
  margin-bottom: 20px;
}

.accessGateTitle {
  margin: 0 0 8px;
  font-size: 30px;
  line-height: 1.1;
}

.accessGateWelcome {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(47, 36, 25, 0.82);
}

.accessGateCopy {
  margin: 0 0 20px;
  color: rgba(70, 55, 40, 0.78);
}

.accessGateForm {
  display: grid;
  gap: 12px;
}

.accessGateLabel {
  font-size: 13px;
  font-weight: 600;
  color: rgba(70, 55, 40, 0.82);
}

.accessGateInputWrap {
  position: relative;
  width: 100%;
}

.accessGateInput {
  width: 100%;
  border: 1px solid rgba(112, 88, 60, 0.16);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 14px;
  min-height: 48px;
  padding: 0 44px 0 14px;
  font-size: 15px;
}

.accessGateToggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: rgba(112, 88, 60, 0.42);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}
.accessGateToggle:hover {
  color: rgba(112, 88, 60, 0.7);
}
.accessGateToggle:focus-visible {
  outline: 2px solid rgba(112, 88, 60, 0.3);
  outline-offset: 2px;
}

.accessGateButton {
  min-height: 46px;
  border: 0;
  border-radius: 14px;
  background: #2f2419;
  color: #fffaf2;
  font-weight: 600;
  cursor: pointer;
}

.accessGateForm.loading .accessGateButton {
  opacity: 0.7;
  pointer-events: none;
}

.accessGateError {
  color: #8b2e2e;
  font-size: 13px;
}

.accessGateFooter {
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(70, 55, 40, 0.56);
}

/* ====================================================================
 * TOPBAR NEW CHAT BUTTON (mobile-only)
 * ==================================================================== */

/* Hidden on desktop — sidebar has the New chat button there */
.topbarNewChatBtn {
  display: none;
}

@media (max-width: 768px) {
  .topbarNewChatBtn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(201, 148, 29, 0.10);
    border: 1px solid rgba(201, 148, 29, 0.22);
    color: var(--primary);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
  }

  .topbarNewChatBtn:active {
    transform: scale(0.93);
    background: rgba(201, 148, 29, 0.18);
  }

  /* Hide hamburger on mobile — sidebar is hidden, no point */
  #sidebarToggle {
    display: none !important;
  }

  /* Hide sidebar entirely on mobile */
  .sidebar {
    display: none !important;
  }
}

/* ====================================================================
 * MS WORKSPACE STATUS PILL (in composer)
 * ==================================================================== */

.composerBrandRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.composerMsStatus {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 5px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.18);
  font-size: 11px;
  font-weight: 600;
  color: #059669;
  letter-spacing: 0.01em;
  transition: opacity 0.2s ease;
}

.composerMsStatus.hidden {
  display: none;
}

.composerMsDot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
  flex-shrink: 0;
  animation: msPulse 2.5s ease-in-out infinite;
}

@keyframes msPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); }
  50%       { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.08); }
}

/* Sofie sidebar: hide cases + workspace sections (desktop) */
body[data-active-assistant="sofie"] .caseDrawerSection,
body[data-active-assistant="sofie"] .workspaceSection {
  display: none !important;
}

/* ====================================================================
 * MOBILE PREMIUM OVERHAUL v2 — Premium feel for touch/phone screens
 * Covers: topbar, segmented switcher, sidebar, drawers, chat, composer,
 *         empty state, message actions. Placed last — overrides everything.
 * ==================================================================== */

/* ── 0. Touch: copy/edit always visible (no hover required) ── */
@media (hover: none) {
  .messageUtilityRow {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  /* Chat items in sidebar — always show action buttons */
  .chatItemMore,
  .chatItem > .hoverDeleteBtn,
  .historyItemPin,
  .historyItemDelete {
    opacity: 0.72 !important;
  }
}

/* ── 1. TABLET + PHONE (≤768px): shared refinements ── */
@media (max-width: 768px) {

  /* Sidebar: premium frosted glass panel */
  .sidebar {
    background: linear-gradient(180deg,
      rgba(253, 252, 249, 0.98) 0%,
      rgba(248, 246, 241, 0.99) 100%) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-right: 1px solid rgba(201, 148, 29, 0.12) !important;
    box-shadow:
      4px 0 32px rgba(15, 23, 42, 0.14),
      1px 0 0 rgba(201, 148, 29, 0.08) !important;
  }

  /* Sidebar backdrop: darker, more frosted */
  .sidebar::before {
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }

  /* Chat items: larger touch targets */
  .chatItem {
    padding: 12px 12px !important;
    border-radius: 10px !important;
    min-height: 52px !important;
  }

  .chatItemTitle {
    font-size: 14px !important;
    font-weight: 500 !important;
  }

  .chatItemPreview {
    font-size: 12px !important;
    margin-top: 2px !important;
  }

  .chatItem.active {
    background: rgba(201, 148, 29, 0.08) !important;
    border-left: 3px solid var(--primary) !important;
  }

  /* New chat button: premium */
  .newChatBtn {
    border-radius: 12px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
  }

  /* Drawers: full-screen premium sheet */
  .drawerContent {
    background: linear-gradient(180deg,
      #faf9f7 0%,
      #f5f3ef 100%) !important;
    box-shadow:
      -12px 0 48px rgba(15, 23, 42, 0.14),
      -2px 0 0 rgba(201, 148, 29, 0.06) !important;
  }

  .drawerHeader {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(250, 249, 247, 0.88) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(201, 148, 29, 0.1) !important;
    padding: 16px 20px !important;
  }

  .drawerHeader .cardTitle {
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
  }

  /* History items: premium cards */
  .historyItem {
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
    margin-bottom: 8px !important;
  }

  .historyItemTitle {
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  .historyItemMeta {
    font-size: 12px !important;
  }

  /* History actions: always visible on touch */
  .historyItemPin,
  .historyItemDelete {
    opacity: 1 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }
}

/* ── 2. PHONE (≤480px): full premium overhaul ── */
@media (max-width: 480px) {
  body {
    background: #f4f1eb !important;
  }

  /* ── Shell: true full-bleed ── */
  .appShell {
    padding: 0 !important;
    min-height: 100dvh !important;
    background:
      radial-gradient(circle at top, rgba(201, 148, 29, 0.08), transparent 32%),
      #f4f1eb !important;
  }

  /* ── Top bar: frosted glass, edge-to-edge ── */
  .topBar {
    border-radius: 0 !important;
    padding: 10px 14px !important;
    min-height: 54px !important;
    border: none !important;
    background: rgba(255, 252, 247, 0.95) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06) !important;
  }

  .topBar::before {
    display: block !important;
    opacity: 0.06 !important;
  }

  .brandTitle {
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    color: #171717 !important;
  }

  .brandSub,
  .brandDetail {
    display: none !important;
  }

  /* ── Icon buttons in topbar: larger touch targets ── */
  .topActions .iconBtn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    color: #3f3328 !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
  }

  /* ── Assistant switcher: iOS segmented control ── */
  .assistantTabsBar {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: unset !important;
    gap: 0 !important;
    margin: 6px 10px 4px !important;
    padding: 3px !important;
    background: rgba(184, 173, 156, 0.18) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  }

  .assistantSwitcherLabel {
    display: none !important;
  }

  .assistantTab {
    flex: 1 !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 9px 10px !important;
    border-radius: 10px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    min-height: 40px !important;
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
  }

  .assistantTab:hover,
  .assistantTab:active {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .assistantTab.active {
    background: #ffffff !important;
    border: none !important;
    box-shadow:
      0 2px 8px rgba(15, 23, 42, 0.13),
      0 0 0 0.5px rgba(15, 23, 42, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    transform: none !important;
  }

  .assistantTab.active .assistantTabName {
    color: #0f172a !important;
  }

  .assistantTabName {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em !important;
    color: rgba(15, 23, 42, 0.62) !important;
  }

  .assistantTabRole {
    display: none !important;
  }

  .assistantAvatar {
    width: 22px !important;
    height: 22px !important;
    border-radius: 6px !important;
  }

  /* ── Primary nav: slim pill scrollbar ── */
  .primaryNav {
    margin: 0 !important;
    padding: 4px 10px !important;
    gap: 6px !important;
  }

  .primaryNavTab {
    font-size: 13px !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    min-height: 34px !important;
  }

  /* ── Layout: zero gap, full bleed ── */
  .layout {
    margin-top: 0 !important;
    gap: 0 !important;
  }

  /* ── Chat card: transparent, screen-filling ── */
  .chatCard {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    min-height: calc(100dvh - 140px) !important;
  }

  /* ── Sidebar: premium frosted glass, full height ── */
  .sidebar {
    top: 0 !important;
    width: 88vw !important;
    min-width: 88vw !important;
    max-width: 340px !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg,
      rgba(255, 253, 249, 0.99) 0%,
      rgba(249, 247, 242, 0.99) 100%) !important;
    backdrop-filter: blur(28px) !important;
    -webkit-backdrop-filter: blur(28px) !important;
    border-right: 1px solid rgba(201, 148, 29, 0.14) !important;
    box-shadow:
      6px 0 40px rgba(15, 23, 42, 0.18),
      2px 0 0 rgba(201, 148, 29, 0.06) !important;
  }

  /* Sidebar backdrop */
  .sidebar::before {
    background: rgba(10, 15, 30, 0.52) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  /* New chat button inside sidebar */
  .sidebarTopActions {
    padding: 16px 12px 10px !important;
    gap: 8px !important;
  }

  .newChatBtn {
    min-height: 44px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
  }

  .chatSections {
    padding: 0 8px !important;
  }

  .chatItem {
    padding: 13px 12px !important;
    border-radius: 12px !important;
    min-height: 56px !important;
    margin-bottom: 2px !important;
  }

  .chatItemTitle {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
  }

  .chatItemPreview {
    font-size: 12px !important;
    margin-top: 3px !important;
    line-height: 1.4 !important;
  }

  /* ── Drawers: full-width premium bottom sheet style ── */
  .drawerContent {
    width: 100% !important;
    max-width: 100% !important;
    background: linear-gradient(180deg, #faf9f7 0%, #f5f3ef 100%) !important;
    box-shadow:
      -16px 0 56px rgba(15, 23, 42, 0.16),
      -2px 0 0 rgba(201, 148, 29, 0.07) !important;
  }

  .drawerHeader {
    padding: 18px 20px 14px !important;
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(250, 249, 247, 0.88) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(201, 148, 29, 0.1) !important;
  }

  .drawerHeader .cardTitle {
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
  }

  .historyList {
    padding: 12px 14px !important;
  }

  .historyItem {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05) !important;
    margin-bottom: 10px !important;
    transform: none !important;
  }

  .historyItemTitle {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
  }

  /* Action buttons: always visible on touch */
  .historyItemPin,
  .historyItemDelete {
    opacity: 1 !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
  }

  /* ── Chat messages: breathing space, premium type ── */
  .chatMessagesWrapper {
    padding: 20px 16px 8px !important;
    background: transparent !important;
  }

  .chatMessagesWrapper .chatLog {
    gap: 22px !important;
    padding-bottom: 40px !important;
  }

  /* Assistant messages: borderless, text-first */
  .chatMessagesWrapper .msg.assistant .bubble {
    padding: 0 2px 6px !important;
    background: transparent !important;
    border: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    font-size: 17px !important;
    line-height: 1.72 !important;
    letter-spacing: -0.008em !important;
    color: #1f2937 !important;
  }

  .chatMessagesWrapper .msg.assistant .bubble,
  .chatMessagesWrapper .msg.assistant .bubble p,
  .chatMessagesWrapper .msg.assistant .bubble li,
  .chatMessagesWrapper .msg.assistant .bubble strong,
  .chatMessagesWrapper .msg.assistant .bubble em,
  .chatMessagesWrapper .msg.assistant .bubble span {
    color: #1f2937 !important;
  }

  /* User messages: warm pill bubble */
  .chatMessagesWrapper .msg.user .bubble {
    background: rgba(46, 46, 48, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px 20px 5px 20px !important;
    padding: 13px 18px !important;
    font-size: 15px !important;
    line-height: 1.62 !important;
    max-width: 85% !important;
    letter-spacing: -0.005em !important;
    color: rgba(255, 255, 255, 0.94) !important;
  }

  /* Typing indicator: softer */
  .chatMessagesWrapper .typingIndicatorRow .bubble {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-radius: 14px !important;
  }

  /* ── Empty/Welcome state: Claude-like hero ── */
  .emptyState {
    padding: 48px 20px 20px !important;
    min-height: calc(100dvh - 240px) !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .emptyStateInner {
    max-width: 100% !important;
    text-align: center !important;
  }

  .emptyStateTitle {
    font-family: inherit !important;
    font-size: 28px !important;
    font-weight: 500 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.035em !important;
    margin-bottom: 12px !important;
    color: #1f2937 !important;
  }

  .emptyStateSub {
    font-size: 14.5px !important;
    line-height: 1.58 !important;
    margin-bottom: 28px !important;
    color: #6b7280 !important;
    letter-spacing: -0.005em !important;
  }

  .emptyStatePrompt {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #8a7a63 !important;
    margin-bottom: 14px !important;
  }

  .emptyStateSuggestions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    justify-items: stretch !important;
    flex-wrap: unset !important;
  }

  .emptyStateSuggestionBtn {
    text-align: left !important;
    white-space: normal !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: -0.005em !important;
    background: rgba(255, 255, 255, 0.96) !important;
    color: #1f2937 !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow:
      0 2px 8px rgba(15, 23, 42, 0.06),
      0 10px 24px rgba(15, 23, 42, 0.04) !important;
    min-height: 68px !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease !important;
  }

  .emptyStateSuggestionBtn:active {
    transform: scale(0.96) !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08) !important;
  }

  .emptyStateDismissBtn {
    top: -12px !important;
    right: 0 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    color: rgba(15, 23, 42, 0.56) !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08) !important;
  }

  .chatLog:has(.emptyState) ~ .chatPanelHeader,
  .chatCard:has(.emptyState) .chatPanelHeaderActions {
    pointer-events: none !important;
  }

  .chatCard:has(.emptyState) .chatResetBtn {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* ── Message action buttons: always visible on touch ── */
  .messageUtilityRow {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    margin-top: 12px !important;
    gap: 6px !important;
  }

  .messageIconBtn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(15, 23, 42, 0.09) !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.07) !important;
  }

  /* ── Composer: frosted glass, premium card ── */
  .composerWrapper {
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: unset !important;
    background: rgba(250, 247, 241, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 0 !important;
  }

  .chatgptComposer {
    border-radius: 24px !important;
    padding: 10px 12px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow:
      0 6px 24px rgba(15, 23, 42, 0.08),
      0 1px 0 rgba(255, 255, 255, 0.86) inset !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .chatInput {
    color: #111827 !important;
    font-size: 16px !important;
    min-height: 46px !important;
    max-height: 160px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.008em !important;
  }

  .chatInput::placeholder {
    color: #8b8f98 !important;
  }

  .circleBtn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: rgba(248, 244, 236, 0.96) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    color: #5b4b3b !important;
  }

  .chatgptComposer:not(.isTyping) .chatInput {
    min-height: 24px !important;
    height: 24px !important;
    max-height: 24px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .chatgptComposer.isTyping .chatInput {
    min-height: 46px !important;
    max-height: 160px !important;
  }

  .composerAttachmentStack {
    gap: 6px !important;
    margin-bottom: 2px !important;
  }

  .activeChatFilesBar,
  .pendingAttachBar {
    width: 100% !important;
  }

  .activeChatFilesLabel {
    display: none !important;
  }

  .activeChatFilesList {
    width: 100% !important;
    gap: 6px !important;
  }

  .activeChatFileChipWrap,
  .pendingChip {
    max-width: 100% !important;
  }

  .pendingChip {
    border-radius: 14px !important;
    box-shadow: none !important;
  }

  .composerQuickMenu {
    left: 0 !important;
    right: auto !important;
    bottom: calc(100% + 10px) !important;
    min-width: min(280px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    border-radius: 18px !important;
    padding: 8px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16) !important;
  }

  .composerQuickMenu.hidden {
    opacity: 0 !important;
    transform: translateY(8px) scale(0.96) !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  .composerQuickMenuItem {
    color: #1f2937 !important;
    border-radius: 14px !important;
  }

  .composerQuickMenuIcon {
    color: #5b4b3b !important;
  }

  .composerQuickMenuItem:hover,
  .composerQuickMenuItem:active {
    background: rgba(248, 244, 236, 0.98) !important;
  }

  .composerBrandRow {
    font-size: 10px !important;
    padding-bottom: 0 !important;
  }

  .brandSignature {
    color: rgba(127, 107, 82, 0.3) !important;
  }
}

.appFooter {
  display: none;
}

.assistantSelectBody{
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top, rgba(198,162,96,0.18), transparent 26%),
    linear-gradient(180deg, #f7f2e9 0%, #efe7d7 100%);
  color: #201711;
}

.assistantSelectPage{
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 28px 72px;
}

.assistantSelectHeader{
  max-width: 760px;
  margin-bottom: 30px;
}

.assistantSelectEyebrow{
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a6112;
  margin-bottom: 14px;
}

.assistantSelectTitle{
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(42px, 6vw, 72px);
  line-height: 0.96;
  letter-spacing: -0.02em;
}

.assistantSelectSubtitle{
  margin: 16px 0 0;
  max-width: 640px;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(32, 23, 17, 0.72);
}

.assistantRoster{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.assistantProfileCard{
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  align-items: stretch;
  border-radius: 32px;
  border: 1px solid rgba(138, 97, 18, 0.18);
  background: rgba(255,255,255,0.76);
  box-shadow: 0 24px 72px rgba(65, 44, 18, 0.10);
  min-height: 420px;
}

.assistantProfilePortrait{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px;
  background: linear-gradient(160deg, rgba(33,24,15,0.96), rgba(67,49,27,0.82));
}

.assistantProfileCard--sofie .assistantProfilePortrait{
  background: linear-gradient(160deg, rgba(20,27,48,0.98), rgba(35,77,143,0.82));
}

.assistantProfileGlow{
  position: absolute;
  inset: 22px;
  border-radius: 28px;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 64%);
}

.assistantProfileAvatar{
  position: relative;
  z-index: 1;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.assistantProfileAvatar .botFace{
  transform: scale(1.8);
}

.assistantProfileContent{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 34px 34px 30px;
}

.assistantProfileMeta{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(32, 23, 17, 0.50);
  margin-bottom: 10px;
}

.assistantProfileName{
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 54px;
  line-height: 0.95;
}

.assistantProfileRole{
  margin-top: 8px;
  font-size: 18px;
  color: #8a6112;
}

.assistantProfileTagline{
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(32, 23, 17, 0.78);
}

.assistantProfileCapabilities{
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.assistantProfileCapabilities li{
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(32, 23, 17, 0.82);
}

.assistantProfileCapabilities li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c58f42;
}

.assistantProfileCta{
  align-self: flex-start;
  margin-top: 28px;
  padding: 14px 22px;
  border-radius: 999px;
  text-decoration: none;
  background: #16110c;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 14px 30px rgba(22, 17, 12, 0.16);
}

.assistantSwitchBtn{
  display: none; /* moved to account menu on all screen sizes */
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(136, 120, 99, 0.22);
  background: rgba(255,255,255,0.88);
  color: #43321c;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  margin-right: 8px;
}

.emptyStateHeroPhrase{
  margin-top: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(28px, 4.1vw, 48px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: #1f1710;
  max-width: 760px;
}

@media (max-width: 480px) {
  .assistantSelectPage{
    padding: 24px 16px 44px;
  }

  .assistantSelectHeader{
    margin-bottom: 20px;
  }

  .assistantSelectTitle{
    font-size: 42px;
  }

  .assistantSelectSubtitle{
    font-size: 15px;
  }

  .assistantRoster{
    grid-template-columns: repeat(2, minmax(248px, 82vw));
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
  }

  .assistantProfileCard{
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 26px;
    scroll-snap-align: start;
  }

  .assistantProfilePortrait{
    min-height: 210px;
  }

  .assistantProfileAvatar{
    width: 132px;
    height: 132px;
  }

  .assistantProfileContent{
    padding: 22px 20px 22px;
  }

  .assistantProfileName{
    font-size: 40px;
  }

  .assistantProfileRole{
    font-size: 16px;
  }

  .assistantSwitchBtn{
    padding: 7px 10px;
    font-size: 12px;
    margin-right: 6px;
  }

  .emptyState {
    padding: 36px 16px 10px !important;
    min-height: calc(100dvh - 260px) !important;
  }

  .emptyStateInner {
    max-width: 100% !important;
    text-align: center !important;
  }

  .emptyStateHeroPhrase{
    font-size: 26px !important;
    line-height: 1.08 !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ── Account Menu ── */
.accountMenuWrap {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 9999;
}

/* Desktop: small dropdown */
.accountMenu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  z-index: 9999;
  padding: 6px;
  border-radius: 16px;
  background: rgba(255, 252, 246, 0.98);
  border: 1px solid rgba(50, 38, 24, 0.08);
  box-shadow: 0 12px 36px rgba(40, 28, 14, 0.13), 0 2px 8px rgba(40, 28, 14, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 1;
  transform: translateY(0) scale(1);
  transform-origin: top right;
  transition: opacity 180ms cubic-bezier(0.22, 0.9, 0.22, 1),
              transform 180ms cubic-bezier(0.22, 0.9, 0.22, 1);
}

.accountMenu.hidden {
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  pointer-events: none;
  visibility: hidden;
}

/* Mobile: bottom sheet — never overlaps chat content */
/* Backdrop for mobile account menu bottom sheet */
.accountMenuBackdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 14, 8, 0.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9997;
}

@media (max-width: 768px) {

  .accountMenuBackdrop.active {
    display: block;
  }

  .accountMenu {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: unset;
    width: 100%;
    border-radius: 24px 24px 0 0;
    padding: 8px 8px calc(env(safe-area-inset-bottom, 0px) + 12px);
    transform-origin: bottom center;
    box-shadow: 0 -8px 40px rgba(20, 14, 8, 0.18);
  }

  /* Drag handle */
  .accountMenu::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(50, 38, 24, 0.18);
    margin: 6px auto 10px;
  }

  .accountMenu.hidden {
    transform: translateY(100%);
    opacity: 1;
    visibility: hidden;
  }

  .accountMenuItem {
    padding: 14px 18px !important;
    font-size: 16px !important;
    border-radius: 14px !important;
  }
}

.accountMenuItem {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: none;
  background: transparent;
  border-radius: 12px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft, #3d342b);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}

.accountMenuItem:hover {
  background: rgba(50, 38, 24, 0.06);
}

.accountMenuLogout {
  color: #b03a2e;
}

.accountMenuLogout:hover {
  background: rgba(176, 58, 46, 0.07);
}

.accountMenuWrap.open .accountMenuBtn {
  background: rgba(50, 38, 24, 0.08);
}

.accountMenuDivider {
  height: 1px;
  background: rgba(50, 38, 24, 0.07);
  margin: 4px 8px;
}

/* Mobile-only items: hidden on desktop, visible on touch screens */
.accountMenuMobileOnly {
  display: none;
}

@media (max-width: 768px) {
  .accountMenuMobileOnly {
    display: flex;
  }
  /* Hide Library, History, Drafts icons — they're in the account menu on mobile */
  .topBarFilesBtn,
  #historyBtn,
  #draftsBtn {
    display: none !important;
  }
  /* Keep New Chat button visible on mobile */
  .topbarNewChatBtn {
    display: inline-flex !important;
  }
}

/* ── Switch Assistant button — inside the chat empty state ── */
.emptySwitchBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(136, 120, 99, 0.28);
  background: rgba(255, 255, 255, 0.82);
  color: #3d2e1a;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  box-shadow: 0 2px 8px rgba(40, 28, 14, 0.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.emptySwitchBtn:hover {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 16px rgba(40, 28, 14, 0.12);
  transform: translateY(-1px);
}

.emptySwitchBtn:active {
  transform: translateY(0) scale(0.98);
}