/* ═══════════════════════════════════════════════════════════
   VICHEM AI BOT — Main Stylesheet
   ═══════════════════════════════════════════════════════════ */

/* ── Fonts ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&display=swap');

/* ── Reset ─────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --navy:       #1a3a6b;
  --navy-dark:  #122d56;
  --navy-light: #243f7a;
  --accent:     #2e80d8;
  --accent2:    #e8f0fb;
  --green:      #4ade80;
  --red:        #f87171;
  --bg:         #eef2f8;
  --surface:    #ffffff;
  --border:     #dde3ee;
  --text:       #1a1a2e;
  --muted:      #7a8aaa;
  --bubble-bot: #f0f4fa;
}


/* ══════════════════════════════════════════════════════════════
   LAYOUT — Body, Shell, Screens
   ══════════════════════════════════════════════════════════════ */

body {
  font-family: 'Be Vietnam Pro', -apple-system, sans-serif;
  background: var(--bg);
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.shell {
  width: 100%;
  height: 100dvh;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Desktop: shell fills all available space (24px vertical, 48px horizontal padding).
   min-height guard: landscape phones are wider than 768px but short — they must keep
   the fullscreen mobile shell, not the padded desktop frame. */
@media (min-width: 768px) and (min-height: 501px) {
  body {
    background: #d8e0ee;
    padding: 24px 48px;
  }
  .shell {
    max-width: calc((100vw - 96px) / 1.15);
    height: calc((100dvh - 48px) / 1.15);
    border-radius: 20px;
    box-shadow: 0 12px 60px rgba(26, 58, 107, .18);
    zoom: 1.15; /* 15% desktop zoom — pre-zoom dims divided by 1.15 so post-zoom fits exactly */
  }
}

.screen        { flex: 1; display: none; flex-direction: column; overflow: hidden; }
.screen.active { display: flex; }


/* ══════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════ */

.header {
  background: var(--color-primary);
  color: #fff;
  padding: 0 18px;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
}
@media (min-width: 768px) { .header { padding: 0 24px; min-height: 64px; } }

/* Full wordmark on the blue bar → sits in a white pill so the blue+green logo reads. */
.header-logo { cursor: pointer; }
/* Subtabs (expense, dashboard KPI, AR action…) hide the header identity cluster —
   user + version live on the front page (launcher) only. Toggled via body class
   in openSubbot / goToLauncher / _resetToLogin. */
body.subtab-open .subbot-label,
body.subtab-open .user-chip,
body.subtab-open .version-badge,
body.subtab-open .status-dot { display: none !important; }
.header-logo {
  height: 34px;
  background: #fff;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  padding: 0 11px;
  flex-shrink: 0;
}
.header-logo .brand-logo-img { height: 21px; width: auto; object-fit: contain; display: block; }

/* Fills the middle of the header; swapped between main-screen and reports contexts. */
.header-ctx   { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.header-titles { min-width: 0; flex: 1; }
.header-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.1; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-sub   { font-size: 12px; opacity: .8; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.version-badge { font-size: 10px; color: rgba(255,255,255,.55); font-family: var(--font-mono, monospace); }
.status-dot    { width: 8px; height: 8px; border-radius: 50%; background: var(--green-400); box-shadow: 0 0 0 2px rgba(170,208,55,.28); }

.back-btn          { display: none; background: rgba(255,255,255,.14); border: none; border-radius: var(--radius-md); color: #fff; font-size: 12px; font-family: inherit; padding: 6px 11px; cursor: pointer; transition: background var(--duration-fast); }
.back-btn:hover    { background: rgba(255,255,255,.24); }
.back-btn.visible  { display: flex; align-items: center; gap: 5px; }

.subbot-label        { font-size: 11px; background: rgba(255,255,255,.16); border-radius: var(--radius-sm); padding: 3px 8px; display: none; }
.subbot-label.visible { display: block; }

.user-chip          { font-size: 11px; color: rgba(255,255,255,.85); display: none; align-items: center; gap: 5px; }
.user-chip.visible  { display: flex; }
.user-chip-dot      { width: 6px; height: 6px; border-radius: 50%; background: var(--green-400); }


/* ══════════════════════════════════════════════════════════════
   LOGIN SCREEN
   ══════════════════════════════════════════════════════════════ */

.login-screen {
  align-items: center;
  padding: 24px;
  background: var(--surface-page);
  overflow-y: auto;   /* short/landscape screens: card scrolls instead of clipping */
}
/* Vertical centering via the card's auto margins (not justify-content): when the
   card is taller than the viewport the auto margins collapse to 0, so its top
   stays reachable by scrolling instead of being clipped above the fold. */

.login-card {
  width: 100%; max-width: 400px;
  background: var(--surface-card); border-radius: var(--radius-lg); padding: 44px 32px;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  text-align: center;
  margin: auto 0;     /* centers vertically but stays fully reachable when taller than the viewport */
}

/* Login card is white, so the full color wordmark sits directly (no tile). */
.login-logo-wrap {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.login-logo-wrap .brand-logo-img { width: 210px; max-width: 72%; height: auto; object-fit: contain; display: block; }

.login-title { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--text-strong); text-align: center; line-height: 1.15; letter-spacing: .01em; }
.login-sub   { font-size: 14px; color: var(--text-muted); text-align: center; margin-top: 6px; }

.login-form       { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.login-input-wrap { position: relative; }

.login-input {
  width: 100%; border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 12px 44px 12px 16px; font-size: 15px; font-family: inherit; color: var(--text-body);
  outline: none; transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
  background: #fff;
}
.login-input:focus        { border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
.login-input::placeholder { color: var(--text-muted); }

.toggle-pass       { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 4px; display: flex; align-items: center; }
.toggle-pass:hover { color: var(--text-body); }
.toggle-pass svg   { width: 18px; height: 18px; }

.login-btn {
  width: 100%; background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-md);
  padding: 13px; font-size: 15px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: background var(--duration-fast), transform .1s;
}
.login-btn:hover    { background: var(--color-primary-hover); }
.login-btn:active   { transform: translateY(1px); }
.login-btn:disabled { background: var(--border-default); cursor: not-allowed; }

.login-error  { font-size: 12px; color: var(--danger); text-align: center; min-height: 16px; }
.login-footer { font-size: 12px; color: var(--text-faint); text-align: center; margin-top: 4px; }


/* ══════════════════════════════════════════════════════════════
   LAUNCHER SCREEN
   ══════════════════════════════════════════════════════════════ */

.launcher-screen { padding: 0; background: var(--surface-page); overflow-y: auto; }
.launcher-inner  { padding: 24px 20px 32px; display: flex; flex-direction: column; gap: 24px; min-height: 100%; }

.launcher-greeting    { text-align: left; }
.launcher-greeting h2 { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--color-primary); line-height: 1.1; letter-spacing: .01em; }
.launcher-greeting p  { font-size: 15px; color: var(--text-muted); margin-top: 6px; }

.launcher-section-title { font-size: 11px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; }

.subbot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (min-width: 600px) { .subbot-grid { grid-template-columns: repeat(3, 1fr); } }

.subbot-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: 20px 18px; cursor: pointer;
  transition: box-shadow var(--duration-fast), transform var(--duration-fast), border-color var(--duration-fast);
  display: flex; flex-direction: column; align-items: flex-start;
  position: relative; overflow: hidden;
}
.subbot-card:hover             { border-color: var(--border-default); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.subbot-card:active            { transform: translateY(-1px) scale(.99); }
.subbot-card.coming-soon       { opacity: .6; cursor: default; }
.subbot-card.coming-soon:hover { border-color: var(--border-subtle); box-shadow: none; transform: none; }

.subbot-icon   { width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--blue-50); display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; }
.subbot-name   { font-size: 15px; font-weight: 600; color: var(--text-strong); line-height: 1.2; margin-top: 14px; }
.subbot-desc   { font-size: 13px; color: var(--text-muted); line-height: 1.4; margin-top: 6px; }
.subbot-status { position: absolute; top: 16px; right: 16px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--radius-xs); }
.status-live   { background: var(--green-50); color: var(--green-600); }
.status-soon   { background: var(--surface-sunken); color: var(--text-muted); }

.launcher-logout { display: flex; justify-content: flex-end; gap: 12px; margin-top: auto; padding-top: 8px; }
.logout-btn      { background: var(--color-primary); border: none; border-radius: var(--radius-md); color: #fff; font-size: 13px; font-weight: 600; font-family: inherit; padding: 10px 16px; cursor: pointer; transition: background var(--duration-fast); }
.logout-btn:hover { background: var(--color-primary-hover); }
.change-pass-btn       { background: var(--surface-sunken); border: none; border-radius: var(--radius-md); color: var(--text-body); font-size: 13px; font-weight: 600; font-family: inherit; padding: 10px 16px; cursor: pointer; transition: background var(--duration-fast); }
.change-pass-btn:hover { background: var(--border-default); }

@media (max-width: 600px) {
  .header-title         { font-size: 16px; }
  .login-card           { padding: 36px 22px; }
  .login-title          { font-size: 22px; }
  .login-logo-wrap .brand-logo-img { width: 168px; }
  .launcher-greeting h2 { font-size: 24px; }
  /* Header breathing room on small phones: trim non-essential bits */
  .version-badge        { display: none; }
  .back-btn.visible span { display: none; }
  #userChipName         { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* KPI labels: drop uppercase/tracking so the 4 columns don't wrap to 3–4 lines.
     Scoped to .kpi-bar so it beats the later base .kpi-label rule regardless of order. */
  .kpi-bar .kpi-label   { text-transform: none; letter-spacing: 0; }
}


/* ══════════════════════════════════════════════════════════════
   MESSAGES & CHAT
   ══════════════════════════════════════════════════════════════ */

.messages {
  flex: 1; overflow-y: auto;
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  scroll-behavior: smooth; min-height: 120px;
}
.messages::-webkit-scrollbar       { width: 4px; }
.messages::-webkit-scrollbar-thumb { background: #d0d8e4; border-radius: 2px; }

@media (min-width: 768px) { .messages { padding: 20px 24px; } }

.msg      { display: flex; flex-direction: column; max-width: 82%; }
.msg.user { align-self: flex-end; align-items: flex-end; }
.msg.bot  { align-self: flex-start; align-items: flex-start; }
@media (min-width: 768px) { .msg { max-width: 78%; } }

.msg-bubble {
  padding: 11px 16px; border-radius: 16px;
  font-size: 15px; line-height: 1.55; word-break: break-word;
}
.msg.user .msg-bubble { background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
.msg.bot  .msg-bubble { background: #edf2fb; color: var(--text); border-bottom-left-radius: 4px; border-left: 3px solid #c8d8f0; }

.msg-time { font-size: 10px; color: #94a3b8; margin-top: 3px; padding: 0 4px; }

.msg.bot .msg-bubble strong { font-weight: 600; }
.msg.bot .msg-bubble em     { font-style: italic; }

.msg-bubble .trunc          { cursor: pointer; border-bottom: 1px dotted currentColor; opacity: .8; transition: opacity .15s; }
.msg-bubble .trunc:hover    { opacity: 1; }
.msg-bubble .trunc.expanded { word-break: break-all; opacity: 1; }

/* Tables inside bot messages */
.msg.bot .msg-bubble table                { border-collapse: collapse; width: 100%; margin-top: 8px; font-size: 13px; }
.msg.bot .msg-bubble th,
.msg.bot .msg-bubble td                   { border: 1px solid #d0d8e4; padding: 6px 10px; text-align: left; }
.msg.bot .msg-bubble th                   { background: #e8edf4; font-weight: 600; color: var(--navy); }
.msg.bot .msg-bubble tr:nth-child(even) td { background: #f8fafc; }


/* ══════════════════════════════════════════════════════════════
   EXPENSE FORM BAR (collapsed strip at bottom of chat)
   ══════════════════════════════════════════════════════════════ */

.ef-bar {
  display: none; align-items: center; gap: 10px;
  padding: 0 14px; background: var(--surface);
  border-top: 2px solid var(--border);
  height: 48px; flex-shrink: 0;
  cursor: pointer; user-select: none; transition: background .15s;
}
.ef-bar.visible { display: flex; }
.ef-bar:hover   { background: #f5f8ff; }

.ef-bar-icon  { font-size: 16px; flex-shrink: 0; }
.ef-bar-info  { flex: 1; min-width: 0; }
.ef-bar-title { font-size: 13px; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ef-bar-sub   { font-size: 10px; color: var(--muted); }

.ef-bar-submit {
  background: var(--accent); color: #fff; border: none; border-radius: 10px;
  padding: 8px 20px; font-size: 14px; font-weight: 700; font-family: inherit;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: all .15s; box-shadow: 0 2px 8px rgba(46,128,216,.35); letter-spacing: .2px;
}
.ef-bar-submit:hover    { background: #1a6ec0; box-shadow: 0 4px 12px rgba(46,128,216,.45); transform: translateY(-1px); }
.ef-bar-submit:active   { transform: translateY(0); }
.ef-bar-submit:disabled { background: #c0c8d8; cursor: not-allowed; box-shadow: none; }

.ef-bar-chevron      { font-size: 14px; color: var(--accent); flex-shrink: 0; transition: transform .2s; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--accent2); }
.ef-bar-chevron.open { transform: rotate(180deg); }

.ef-bar-add-manual       { background: var(--accent2); color: var(--accent); border: none; border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background .15s, color .15s; letter-spacing: .1px; }
.ef-bar-add-manual:hover { background: var(--accent); color: #fff; }


/* ══════════════════════════════════════════════════════════════
   EXPENSE FORM PANEL (expanded invoice item list)
   ══════════════════════════════════════════════════════════════ */

.ef-panel      { display: none; flex-direction: column; background: #f5f8ff; border-top: 1px solid var(--border); max-height: 38dvh; flex-shrink: 0; overflow: hidden; }
.ef-panel.open { display: flex; }

.ef-panel-scroll { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.ef-panel-scroll::-webkit-scrollbar       { width: 3px; }
.ef-panel-scroll::-webkit-scrollbar-thumb { background: #c8d4e4; border-radius: 2px; }

.ef-item          { background: #fff; border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.ef-item.has-warn { border-color: #fde68a; }
.ef-item.has-dupe { border-color: #fed7aa; background: #fffbf5; }

.ef-item-top    { display: flex; align-items: flex-start; gap: 8px; }
.ef-item-num    { font-size: 10px; font-weight: 700; color: #fff; background: var(--navy); border-radius: 5px; padding: 2px 7px; flex-shrink: 0; margin-top: 1px; }
.ef-item-vendor { flex: 1; font-size: 13px; font-weight: 600; color: var(--navy); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 4px; padding: 2px 5px; transition: background .15s; }
.ef-item-vendor:hover { background: rgba(255,255,255,.6); }
.ef-item-vendor:focus { outline: none; background: #fff; border: 1px solid var(--border); color: var(--text); text-overflow: clip; white-space: normal; overflow: visible; }
.ef-item-total  { font-size: 13px; font-weight: 700; color: var(--navy); white-space: nowrap; flex-shrink: 0; }
.ef-item-remove { background: none; border: 1.5px solid #e2e8f0; border-radius: 7px; cursor: pointer; color: #94a3b8; padding: 4px; flex-shrink: 0; transition: all .15s; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; }
.ef-item-remove:hover { color: #e05252; border-color: #fca5a5; background: #fff5f5; }

.ef-badge        { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 10px; display: inline-block; flex-shrink: 0; }
.ef-badge-xml    { background: #dbeafe; color: #1e40af; }
.ef-badge-photo  { background: #dcfce7; color: #166534; }
.ef-badge-manual { background: #f3f4f6; color: #6b7280; }

.ef-item-warn      { font-size: 11px; padding: 5px 8px; border-radius: 6px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.ef-item-warn.dupe { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }

/* Fields grid */
.ef-fields     { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 8px; }
.ef-field      { display: flex; flex-direction: column; gap: 2px; }
.ef-field.full { grid-column: 1 / -1; }
.ef-field-lbl  { font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: .3px; text-transform: uppercase; }
.ef-field-val  { font-size: 12px; color: var(--text); font-weight: 500; border: 1px solid transparent; border-radius: 5px; padding: 3px 5px; cursor: pointer; transition: border-color .15s, background .15s; min-height: 24px; word-break: break-word; }
.ef-field-val:empty::before { content: attr(data-placeholder); color: #c0c8d8; font-style: italic; }
.ef-field-val:hover  { border-color: var(--border); background: #f8fafc; }
.ef-field-val:focus  { outline: none; border-color: var(--accent); background: #fff; cursor: text; }
.ef-field-val.edited { border-color: #f59e0b !important; background: #fffbeb !important; }

/* Dense layout helpers */
.ef-dense-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px 10px; margin-bottom: 5px; }
@media (max-width: 480px) { .ef-dense-grid { grid-template-columns: 1fr 1fr; } }
.ef-desc-row   { margin-bottom: 6px; }
.ef-bottom-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Amount chips */
.ef-amounts-inline { display: flex; align-items: center; gap: 4px; background: #f4f7fd; border: 1px solid #dde6f4; border-radius: 8px; padding: 5px 10px; flex-wrap: wrap; }
.ef-amt-chip       { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 70px; }
.ef-amt-chip-total { min-width: 90px; }
.ef-amt-sep        { font-size: 14px; color: var(--muted); font-weight: 300; padding: 0 2px; align-self: center; margin-top: 10px; }
.ef-amt-lbl        { font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.ef-amt-val        { font-size: 12px; font-weight: 500; color: var(--text); text-align: center; min-width: 60px; border: 1px solid transparent; border-radius: 4px; padding: 2px 4px; cursor: text; transition: border-color .15s, background .15s; }
.ef-amt-val:hover  { border-color: var(--border); background: #fff; }
.ef-amt-val:focus  { outline: none; border-color: var(--accent); background: #fff; }
.ef-amt-val.edited { border-color: #f59e0b !important; background: #fffbeb !important; }
.ef-amt-val-total  { font-size: 13px; font-weight: 700; color: var(--navy); }
.ef-amt-val:empty::before { content: attr(data-placeholder); color: #c0c8d8; font-style: italic; }
.ef-currency-sel   { font-size: 10px; font-weight: 600; color: var(--muted); align-self: flex-end; margin-left: 2px; margin-bottom: 3px; border: 1px solid var(--border); border-radius: 4px; background: transparent; cursor: pointer; padding: 1px 3px; }
.ef-currency-sel:hover, .ef-currency-sel:focus { border-color: var(--accent); color: var(--accent); outline: none; }

/* Hidden legacy helpers */
.ef-amt-row       { display: none; }
.ef-amounts-block { display: none; }
.ef-amt-divider   { display: none; }

/* Evidence button (prominent inline style) */
.ef-evidence-prominent {
  width: auto !important; height: 30px !important; padding: 0 12px !important;
  flex-direction: row !important; gap: 5px !important; border-radius: 8px !important;
  border: 1.5px solid var(--accent) !important; background: var(--accent2) !important;
  color: var(--accent) !important; font-size: 12px !important; font-weight: 600 !important;
}
.ef-evidence-prominent:hover { background: #d0e4f8 !important; border-color: var(--navy) !important; color: var(--navy) !important; }
.ef-evidence-prominent span  { font-size: 12px; font-weight: 600; }

/* Evidence thumbnails */
.ef-evidence            { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.ef-evidence-thumb-wrap { position: relative; }
.ef-evidence-thumb      { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; border: 1.5px solid var(--border); cursor: pointer; transition: border-color .15s; display: block; }
.ef-evidence-thumb:hover { border-color: var(--accent); }
.ef-evidence-rm         { position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; border-radius: 50%; background: #ef4444; color: #fff; border: none; font-size: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; }
.ef-evidence-add        { width: 44px; height: 44px; border-radius: 6px; border: 1.5px dashed #c8d4e4; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 18px; color: var(--muted); transition: all .15s; flex-shrink: 0; }
.ef-evidence-add:hover  { border-color: var(--accent); color: var(--accent); background: var(--accent2); }
.ef-evidence-lbl        { font-size: 8px; margin-top: 1px; }

/* Panel footer */
.ef-panel-footer { background: #fff; border-top: 1px solid var(--border); padding: 8px 10px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ef-grand-total  { flex: 1; text-align: right; font-size: 13px; font-weight: 700; color: var(--navy); }

/* Attachment size meter */
.ef-attach-meter            { display: flex; flex-direction: column; gap: 3px; min-width: 110px; }
.ef-attach-meter-lbl        { font-size: 11px; color: #475569; white-space: nowrap; }
.ef-attach-meter-bar        { height: 4px; background: #e2e8f0; border-radius: 2px; overflow: hidden; }
.ef-attach-meter-fill       { height: 100%; border-radius: 2px; background: #3b82f6; transition: width .3s; }
.ef-attach-meter-fill.am-warn   { background: #f59e0b; }
.ef-attach-meter-fill.am-danger { background: #ef4444; }
.ef-ev-size { font-size: 10px; color: #64748b; padding: 2px 6px; background: #f1f5f9; border-radius: 10px; align-self: center; white-space: nowrap; }

/* Invoice match prompt */
.ef-match-prompt      { background: #fffbeb; border: 1.5px solid #fde68a; border-radius: 10px; padding: 10px 12px; font-size: 12px; color: var(--text); line-height: 1.5; }
.ef-match-prompt-btns { display: flex; gap: 8px; margin-top: 8px; }
.ef-match-btn         { padding: 7px 16px; border-radius: 8px; font-size: 12px; font-weight: 600; border: none; cursor: pointer; font-family: inherit; transition: all .15s; }
.ef-match-btn-yes     { background: var(--navy); color: #fff; }
.ef-match-btn-yes:hover { background: var(--navy-light); }
.ef-match-btn-no      { background: #f0f4fa; color: var(--muted); border: 1.5px solid var(--border); }
.ef-match-btn-no:hover { background: #e8edf4; }

/* Draft banner */
.ef-draft-banner         { display: none; align-items: center; gap: 10px; padding: 8px 12px; background: #fff8e6; border-bottom: 1px solid #fde68a; font-size: 12px; color: #92400e; flex-shrink: 0; }
.ef-draft-banner.visible { display: flex; }
.ef-draft-info    { flex: 1; }
.ef-draft-btn     { padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; border: none; cursor: pointer; font-family: inherit; transition: all .15s; }
.ef-draft-continue       { background: var(--navy); color: #fff; }
.ef-draft-continue:hover { background: var(--navy-light); }
.ef-draft-discard        { background: #f0f4fa; color: var(--muted); border: 1.5px solid var(--border); }
.ef-draft-discard:hover  { background: #e8edf4; }


/* ══════════════════════════════════════════════════════════════
   MODALS
   ══════════════════════════════════════════════════════════════ */

/* Overlay sits on .shell, covers all screen content */
.modal-overlay         { display: none; position: absolute; inset: 0; background: rgba(0,0,0,.45); z-index: 100; align-items: flex-end; justify-content: center; }
.modal-overlay.visible { display: flex; }
@media (min-width: 768px) { .modal-overlay { align-items: center; } }

.modal-sheet {
  background: #fff; border-radius: 20px 20px 0 0;
  padding: 24px 20px 32px; width: 100%; max-height: 85dvh;
  overflow-y: auto; box-shadow: 0 -8px 40px rgba(26,58,107,.18);
}
@media (min-width: 768px) { .modal-sheet { border-radius: 20px; max-width: 460px; max-height: 80dvh; } }

.modal-title { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
.modal-close { margin-left: auto; background: none; border: 1.5px solid var(--border); border-radius: 8px; cursor: pointer; color: var(--muted); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0; transition: all .15s; flex-shrink: 0; }
.modal-close:hover { border-color: #fca5a5; color: #e05252; background: #fff5f5; }

.modal-field { margin-bottom: 14px; }
.modal-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px; letter-spacing: .3px; }
.modal-label .required { color: #e05252; margin-left: 2px; }

.modal-input {
  width: 100%; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 10px 14px; font-size: 14px; font-family: inherit; color: var(--text);
  outline: none; background: #fafbfd; transition: border-color .15s;
}
.modal-input:focus        { border-color: var(--accent); background: #fff; }
.modal-input::placeholder { color: #aab4c8; }
.modal-input[readonly]    { background: #f0f4fa; color: var(--muted); cursor: default; }

.modal-row           { display: flex; gap: 10px; }
.modal-row .modal-field { flex: 1; }
.modal-note          { font-size: 11px; color: var(--muted); margin-top: -8px; margin-bottom: 14px; }
.modal-actions       { display: flex; gap: 10px; margin-top: 20px; }
.modal-btn           { flex: 1; border: none; border-radius: 12px; padding: 13px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .15s; }
.modal-btn-cancel    { background: var(--accent2); color: var(--accent); }
.modal-btn-cancel:hover  { background: #d8eaf8; }
.modal-btn-submit    { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(46,128,216,.3); }
.modal-btn-submit:hover  { background: #1a6ec0; box-shadow: 0 4px 12px rgba(46,128,216,.4); }

.modal-summary        { background: var(--accent2); border-radius: 10px; padding: 10px 14px; margin-bottom: 18px; font-size: 13px; color: var(--navy); }
.modal-summary strong { display: block; font-size: 15px; margin-bottom: 2px; }

/* Claim detail modal */
.cdm-sheet       { max-width: 480px; margin: 40px auto 24px; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 25px 80px rgba(0,0,0,.3); }
.cdm-header      { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 18px 12px; border-bottom: 1px solid #e8edf3; }
.cdm-header-main { flex: 1; min-width: 0; }
.cdm-title       { font-size: 15px; font-weight: 700; color: var(--navy); }
.cdm-subtitle    { font-size: 12px; color: var(--muted); margin-top: 3px; }
.cdm-close       { background: none; border: none; font-size: 20px; color: var(--muted); cursor: pointer; padding: 0 0 0 12px; line-height: 1; flex-shrink: 0; }

.cdm-pipeline-wrap { padding: 10px 18px 8px; border-bottom: 1px solid #f1f5f9; }
.cdm-section-title { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; padding: 10px 18px 6px; }
.cdm-inv-list      { padding: 0 10px 4px; }
.cdm-action-wrap   { padding: 14px 18px 20px; border-top: 1px solid #e8edf3; margin-top: 8px; }

.mine-cancel-btn          { font-size: 11px; font-weight: 600; color: #dc2626; background: none; border: 1.5px solid #fca5a5; border-radius: 7px; padding: 4px 12px; cursor: pointer; font-family: inherit; transition: all .15s; }
.mine-cancel-btn:hover    { background: #fee2e2; border-color: #dc2626; }
.mine-cancel-btn:disabled { opacity: .45; cursor: not-allowed; }


/* ══════════════════════════════════════════════════════════════
   TYPING INDICATOR
   ══════════════════════════════════════════════════════════════ */

.typing .msg-bubble { display: flex; align-items: center; gap: 5px; padding: 12px 16px; }

.dot              { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; animation: bounce 1.2s infinite; }
.dot:nth-child(2) { animation-delay: .2s; }
.dot:nth-child(3) { animation-delay: .4s; }


/* ══════════════════════════════════════════════════════════════
   INPUT AREA
   ══════════════════════════════════════════════════════════════ */

.input-area {
  padding: 8px 12px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .input-area {
    padding: 10px 20px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
}

.attach-preview         { display: none; align-items: center; gap: 8px; padding: 6px 8px 8px; background: var(--accent2); border-radius: 10px; margin-bottom: 8px; font-size: 12px; color: var(--navy); }
.attach-preview.visible { display: flex; }
.attach-preview-name    { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-preview-size    { color: var(--muted); flex-shrink: 0; }
.attach-remove          { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 16px; line-height: 1; padding: 0 2px; flex-shrink: 0; transition: color .15s; }
.attach-remove:hover    { color: #e05252; }

.input-row { display: flex; gap: 8px; align-items: flex-end; }
#fileInput { display: none; }

.attach-btn          { width: 36px; height: 36px; background: var(--accent2); border: 1.5px solid #c8d8f0; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s; color: var(--accent); }
.attach-btn:hover    { background: #d8eaf8; border-color: var(--accent); }
.attach-btn.has-file { background: var(--accent); border-color: var(--accent); color: #fff; }
.attach-btn svg      { width: 17px; height: 17px; }

textarea {
  flex: 1; border: 1.5px solid var(--border); border-radius: 12px;
  padding: 9px 14px; font-size: 15px; font-family: inherit;
  resize: none; outline: none; max-height: 120px; line-height: 1.4;
  color: var(--text); transition: border-color .15s; background: #fafbfd;
}
textarea:focus        { border-color: var(--accent); background: #fff; }
textarea::placeholder { color: #aab4c8; }

.send-btn          { width: 36px; height: 36px; background: var(--navy); border: none; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s, transform .1s; }
.send-btn:hover    { background: var(--navy-light); }
.send-btn:active   { transform: scale(.92); }
.send-btn:disabled { background: #c0c8d8; cursor: not-allowed; }
.send-btn svg      { width: 17px; height: 17px; fill: #fff; }


/* ══════════════════════════════════════════════════════════════
   KPI BAR
   ══════════════════════════════════════════════════════════════ */

.kpi-bar   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 16px 20px; flex-shrink: 0; background: var(--surface-card); border-bottom: 1px solid var(--border-subtle); }
.kpi-card  { background: var(--surface-sunken); border-radius: var(--radius-md); padding: 10px 12px; }
.kpi-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin-bottom: 4px; line-height: 1.25; }
.kpi-val   { font-size: 15px; font-weight: 700; color: var(--text-muted); line-height: 1.2; }
.kpi-val.live { color: var(--text-strong); }


/* ══════════════════════════════════════════════════════════════
   NOTIFICATIONS WIDGET
   ══════════════════════════════════════════════════════════════ */

.notif-wrap        { margin: 6px 14px 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; flex-shrink: 0; background: var(--surface); }
.notif-header      { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; cursor: pointer; background: #f5f8ff; user-select: none; }
.notif-header-left { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--navy); }
.notif-badge       { background: #fee2e2; color: #b91c1c; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 20px; }
.notif-chev        { font-size: 9px; color: var(--muted); transition: transform .2s; }
.notif-chev.open   { transform: rotate(180deg); }
.notif-body        { display: none; }
.notif-item        { display: flex; align-items: flex-start; gap: 9px; padding: 8px 12px; border-top: 1px solid #f0f4fa; font-size: 12px; line-height: 1.45; color: var(--text); }

.ndot   { width: 7px; height: 7px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.ndot-g { background: #16a34a; }
.ndot-a { background: #d97706; }
.ndot-r { background: #dc2626; }
.ndot-b { background: #2563eb; }
.notif-sub { color: var(--muted); font-size: 11px; margin-top: 1px; }


/* ══════════════════════════════════════════════════════════════
   APPROVAL SCREEN
   ══════════════════════════════════════════════════════════════ */

.appr-screen        { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.appr-screen.active { display: flex; }

/* Sub-tab bar — blue = mine, amber = approver */
.appr-tabs { display: flex; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.appr-tabs::-webkit-scrollbar { display: none; }

.appr-tab-group                    { display: flex; align-items: stretch; flex-shrink: 0; }
.appr-tab-group + .appr-tab-group  { border-left: 2px solid var(--border); }
.appr-tab-group-mine               { background: #f0f5ff; }
.appr-tab-group-appr               { background: #fffbf0; }

.appr-tab {
  padding: 10px 15px; font-size: 14px; cursor: pointer; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  background: none; font-family: inherit;
  border-top: none; border-left: none; border-right: none;
}
.appr-tab-group-mine .appr-tab.active { color: #1d4ed8; font-weight: 700; border-bottom-color: #1d4ed8; }
.appr-tab-group-appr .appr-tab.active { color: #92400e; font-weight: 700; border-bottom-color: #d97706; }

.appr-tab-badge                    { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 20px; min-width: 18px; text-align: center; }
.appr-tab-group-mine .appr-tab-badge { background: #dbeafe; color: #1d4ed8; }
.appr-tab-group-appr .appr-tab-badge { background: #fde68a; color: #92400e; }

.appr-panel        { display: none; flex: 1; overflow-y: auto; padding: 10px 14px; }
.appr-panel.active { display: flex; flex-direction: column; }

.appr-sec-title { font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin: 8px 0 6px; }

/* Loading skeleton */
.appr-loading { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.appr-skel    { height: 82px; border-radius: 12px; background: linear-gradient(90deg, #eef2f8 25%, #e4eaf3 50%, #eef2f8 75%); background-size: 200% 100%; animation: skelShimmer 1.4s infinite; }

/* Month collapsible groups */
.appr-month-group          { margin-bottom: 4px; }
.appr-month-header         { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #eef2f8; border-radius: 8px; cursor: pointer; user-select: none; margin-bottom: 7px; border: 1px solid #dde8f0; transition: background .15s; }
.appr-month-header:hover   { background: #e5ecf7; }
.appr-month-title          { font-size: 13px; font-weight: 700; color: var(--navy); flex: 1; }
.appr-month-count          { font-size: 11px; color: var(--muted); margin-right: 4px; }
.appr-month-chev           { font-size: 11px; color: var(--muted); transition: transform .2s; }
.appr-month-chev.collapsed { transform: rotate(-90deg); }
.appr-month-body           { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.appr-month-body.collapsed { display: none; }

/* Claim cards */
.appr-claim-card             { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: border-color .15s; }
.appr-claim-card:hover       { border-color: var(--accent); }
.appr-claim-card.no-action   { cursor: default; }
.appr-claim-card.no-action:hover { border-color: var(--border); }

.appr-cc-top  { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.appr-cc-name { font-weight: 700; font-size: 14px; color: var(--text); }
.appr-cc-amt  { font-weight: 700; font-size: 15px; color: var(--navy); }
.appr-cc-meta { font-size: 12px; color: var(--muted); display: flex; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.appr-cc-cats { font-size: 12px; color: #444; margin-bottom: 7px; }
.appr-cc-date-year { font-size: 10px; opacity: .7; }

/* Status pills */
.appr-pill           { font-size: 10px; padding: 2px 7px; border-radius: 20px; display: inline-block; }
.appr-pill-p         { background: #fef3c7; color: #92400e; }
.appr-pill-ok        { background: #dcfce7; color: #166534; }
.appr-pill-rej       { background: #fee2e2; color: #991b1b; }
.appr-pill-partial   { background: #e0f2fe; color: #075985; }
.appr-pill-cancelled { background: #f1f5f9; color: #64748b; }

/* Pipeline */
.pipe-line { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.pipe-node { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.pipe-ok   { background: #dcfce7; color: #166534; }
.pipe-rej  { background: #fee2e2; color: #991b1b; }
.pipe-pend { background: #fef3c7; color: #92400e; }
.pipe-sep  { font-size: 10px; color: #94a3b8; padding: 0 1px; }

/* Partial rejection detail */
.partial-rej-detail { margin-top: 8px; padding: 8px 10px; background: #fff7ed; border-left: 3px solid #f97316; border-radius: 0 6px 6px 0; font-size: 11.5px; }
.partial-rej-title  { font-weight: 700; color: #c2410c; margin-bottom: 4px; }
.partial-rej-list   { margin: 3px 0 0; padding-left: 16px; color: #7c2d12; line-height: 1.7; }
.partial-rej-note   { margin-top: 5px; font-style: italic; color: #9a3412; padding-top: 4px; border-top: 1px solid #fed7aa; }
.rej-note-detail    { margin-top: 7px; padding: 6px 9px; background: #fef2f2; border-left: 3px solid #ef4444; border-radius: 0 6px 6px 0; font-size: 11.5px; color: #7f1d1d; font-style: italic; }

/* Approval sub-screen */
.appr-sub-screen        { display: none; flex: 1; overflow-y: auto; padding: 10px 14px; }
.appr-sub-screen.active { display: block; }

.appr-back-btn       { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); cursor: pointer; padding: 4px 0; margin-bottom: 10px; background: none; border: none; font-family: inherit; }
.appr-back-btn:hover { color: var(--text); }

.appr-info-block { background: #f5f8ff; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.appr-info-row   { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; }
.appr-info-lbl   { color: var(--muted); }

.appr-inv-sec-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.appr-hint           { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.appr-toggle-btn     { font-size: 12px; font-weight: 600; color: var(--navy); cursor: pointer; user-select: none; background: #e8f0fb; border: 1.5px solid #c5d8f5; border-radius: 8px; padding: 5px 12px; transition: all .15s; }
.appr-toggle-btn:hover { background: #d4e6ff; border-color: var(--accent); }

.appr-inv-row              { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; border-bottom: 1px solid #f0f4fa; }
.appr-inv-row:last-of-type { border-bottom: none; }
.appr-inv-cb               { width: 14px; height: 14px; margin-top: 2px; flex-shrink: 0; cursor: pointer; accent-color: var(--navy); }
.appr-inv-info             { flex: 1; min-width: 0; }
.appr-inv-vendor           { font-size: 12px; font-weight: 600; }
.appr-inv-meta             { font-size: 11px; color: var(--muted); margin-top: 1px; }
.appr-inv-amt              { font-size: 12px; font-weight: 600; padding-left: 6px; white-space: nowrap; }
.appr-inv-row.rejected .appr-inv-vendor,
.appr-inv-row.rejected .appr-inv-meta,
.appr-inv-row.rejected .appr-inv-amt   { text-decoration: line-through; opacity: .38; }

.appr-total-row  { display: flex; justify-content: space-between; font-weight: 600; font-size: 13px; padding: 8px 0 0; border-top: 1px solid var(--border); margin-top: 2px; }
.appr-action-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

.appr-btn        { padding: 8px 16px; border-radius: 10px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: inherit; transition: all .15s; }
.appr-btn:hover  { background: #f0f4fa; }
.appr-btn-ok     { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 2px 6px rgba(46,128,216,.25); }
.appr-btn-ok:hover  { background: #1a6ec0; box-shadow: 0 3px 10px rgba(46,128,216,.35); }
.appr-btn-rej       { border-color: #fca5a5; color: #dc2626; }
.appr-btn-rej:hover { background: #fee2e2; }

.appr-confirm-box              { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.appr-confirm-title            { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.appr-confirm-row              { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; border-bottom: 1px solid #f0f4fa; }
.appr-confirm-row:last-of-type { border-bottom: none; }
.appr-note-lbl                 { font-size: 11px; color: var(--muted); margin: 12px 0 4px; }
.appr-note-area                { width: 100%; border: 1.5px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 12px; font-family: inherit; color: var(--text); background: var(--surface); resize: vertical; min-height: 56px; outline: none; }
.appr-note-area:focus          { border-color: var(--accent); }

.appr-done-wrap  { text-align: center; padding: 36px 0 20px; }
.appr-done-icon  { font-size: 28px; margin-bottom: 8px; }
.appr-done-title { font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.appr-done-sub   { font-size: 12px; color: var(--muted); max-width: 300px; margin: 0 auto; line-height: 1.55; }

.appr-detail-header   { background: #f5f8ff; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.appr-detail-name     { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.appr-detail-meta     { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: 12px; }
.appr-detail-meta-lbl { color: var(--muted); }
.appr-detail-meta-val { color: var(--text); font-weight: 500; }
.appr-detail-reason   { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text); }
.appr-detail-reason span { color: var(--muted); }

/* Approval invoice cards */
.appr-inv-card               { border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: var(--surface); transition: border-color .15s; }
.appr-inv-card.rejected-card { border-color: #fca5a5; background: #fff5f5; }
.appr-inv-card-top           { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.appr-inv-card-cb            { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--navy); cursor: pointer; }
.appr-inv-card-main          { flex: 1; min-width: 0; }
.appr-inv-card-vendor        { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.appr-inv-card-amt           { font-size: 14px; font-weight: 700; color: var(--navy); flex-shrink: 0; }
.appr-inv-card-fields        { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 11px; margin-bottom: 10px; padding-left: 26px; }
.appr-inv-card-field         { display: flex; flex-direction: column; }
.appr-inv-card-field-lbl     { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .4px; }
.appr-inv-card-field-val     { color: var(--text); font-weight: 500; margin-top: 1px; }
.appr-inv-card-photos        { display: flex; gap: 8px; flex-wrap: wrap; padding-left: 26px; }

/* Lightbox */
.appr-photo-thumb       { width: 72px; height: 72px; border-radius: 8px; border: 1.5px solid var(--border); object-fit: cover; cursor: pointer; transition: border-color .15s; background: #f0f4fa; }
.appr-photo-thumb:hover { border-color: var(--accent); }
.appr-photo-thumb-wrap  { position: relative; width: 72px; height: 72px; }
.appr-photo-loading     { width: 72px; height: 72px; border-radius: 8px; border: 1.5px solid var(--border); background: #f0f4fa; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--muted); }
.appr-lightbox          { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 1000; align-items: center; justify-content: center; }
.appr-lightbox.open     { display: flex; }
.appr-lightbox img      { max-width: 92vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,.5); }
.appr-lightbox-close    { position: fixed; top: 16px; right: 20px; color: #fff; font-size: 28px; cursor: pointer; line-height: 1; background: none; border: none; text-shadow: 0 2px 6px rgba(0,0,0,.5); }


/* ══════════════════════════════════════════════════════════════
   EXPENSE MODE TABS & CHAT/APPROVAL TOGGLE
   ══════════════════════════════════════════════════════════════ */

.expense-mode-tabs         { display: none; border-bottom: 1px solid var(--border); background: #f8fafd; flex-shrink: 0; align-items: center; padding-left: 4px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.expense-mode-tabs::-webkit-scrollbar { display: none; }
.expense-mode-tabs.visible { display: flex; }
.expense-mode-tab          { padding: 8px 14px; font-size: 13px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font-family: inherit; border-top: none; border-left: none; border-right: none; display: flex; align-items: center; gap: 5px; flex-shrink: 0; white-space: nowrap; }
.expense-mode-tab.active   { color: var(--navy); font-weight: 600; border-bottom-color: var(--navy); }

.chat-body        { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.chat-body.hidden { display: none; }

.appr-inline         { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.appr-inline.visible { display: flex; }


/* ══════════════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════════════ */

@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%            { transform: translateY(-6px); }
}

@keyframes skelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════════════════════
   REPORTS SCREEN
   ══════════════════════════════════════════════════════════════ */

#screenReports { padding: 0; overflow: hidden; }

.reports-layout {
  display: flex;
  height: 100%;
  overflow: hidden;
}

/* Sidebar — topic list */
.reports-sidebar {
  width: 200px;
  min-width: 180px;
  border-right: 1px solid var(--border);
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #f8fafd;
  overflow-y: auto;
}
.reports-sidebar-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 0 16px 10px;
}
.report-topic-btn {
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 0;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background .15s, color .15s, border-color .15s;
}
.report-topic-btn:hover  { background: var(--accent2); }
.report-topic-btn.active { background: var(--accent2); color: var(--navy); font-weight: 600; border-left-color: var(--accent); }

/* Main content column */
.reports-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Report iframe area */
.reports-frame-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.reports-period-chip {
  margin-top: auto;
  padding: 10px 16px 4px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.reports-period-chip:empty { display: none; }
.report-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.reports-frame-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  background: var(--bg);
  pointer-events: none;
  letter-spacing: .01em;
}

/* Chat drawer */
.reports-chat {
  border-top: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  max-height: 320px;
  transition: max-height .25s ease;
}
.reports-chat.collapsed { max-height: 44px; }

.reports-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 44px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  color: var(--muted);
  background: #f8fafd;
  flex-shrink: 0;
  transition: color .15s;
}
.reports-chat-header:hover { color: var(--navy); }
.reports-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reports-chat.collapsed .reports-chat-body,
.reports-chat.collapsed .reports-chat-input-row { display: none; }

.report-chat-msg {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.report-chat-user {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 2px;
}
.report-chat-bot {
  align-self: flex-start;
  background: var(--bg);
  border: 1px solid var(--border);
  border-bottom-left-radius: 2px;
}

.reports-chat-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  align-items: center;
}
.reports-chat-input {
  flex: 1;
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color .15s;
}
.reports-chat-input:focus { border-color: var(--accent); }
.reports-chat-send {
  width: 36px;
  height: 36px;
  background: var(--navy);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, transform .1s;
}
.reports-chat-send:hover  { background: var(--navy-light); }
.reports-chat-send:active { transform: scale(.92); }
.reports-chat-send svg    { width: 17px; height: 17px; fill: #fff; }

/* Home chip inside the topic row — mobile only (desktop keeps the header back button) */
.reports-home-btn { display: none; }

/* Mobile, portrait OR landscape: app header hidden, one slim chip row on top.
   The max-height arm catches phones held horizontally — wider than 600px but short. */
@media (max-width: 600px), (max-height: 500px) {
  .reports-layout { flex-direction: column; }
  .reports-sidebar {
    width: 100%;
    min-width: unset;
    flex-direction: row;
    align-items: center;
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 8px;
    gap: 4px;
    flex-shrink: 0;
  }
  .reports-sidebar-title { display: none; }
  .reports-period-chip { display: none; }
  #reportTopicList { display: flex; align-items: center; gap: 4px; }
  .reports-home-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 6px 12px;
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
  }
  .report-topic-btn {
    width: auto;
    white-space: nowrap;
    border: 1.5px solid transparent;
    border-radius: 8px;
    padding: 6px 12px;
    background: var(--bg);
  }
  .report-topic-btn.active {
    border-color: var(--accent);
    background: var(--accent2);
  }
  .reports-chat { max-height: min(260px, 60dvh); }
  .reports-chat.collapsed { max-height: 40px; }
  .reports-chat-header { height: 40px; }
}