@import url('https://cdn.jsdelivr.net/npm/@fontsource/cormorant-garamond@5/400.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/cormorant-garamond@5/500.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/cormorant-garamond@5/600.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/cormorant-garamond@5/400-italic.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/jost@5/300.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/jost@5/400.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/jost@5/500.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/jost@5/600.css');

:root {
  --bg:#F4F2ED !important;
  --fg:#2B2724 !important;
  --panel:#FDFCFA !important;
  --border:rgba(43,39,36,.14) !important;
  --red:#A8894E !important;
  --accent:#A8894E !important;
  --accent-primary:#A8894E !important;
  --brand-color:#A8894E !important;
  --green:#3E7255 !important;
  --muted:#6B645C !important;
  --sidebar-bg:#FDFCFA !important;
  --input-bg:#FDFCFA !important;
  --input-border:rgba(43,39,36,.18) !important;
  --send-btn-bg:#2B2724 !important;
  --send-btn-hover:#A8894E !important;
  --user-bubble-bg:#EFE9DC !important;
  --ai-bubble-bg:#FDFCFA !important;
  --bubble-border:rgba(43,39,36,.10) !important;
  --toggle-active:#A8894E !important;
  --font-family:'Jost',Helvetica,Arial,sans-serif !important;
  --balivip-serif:'Cormorant Garamond',Georgia,serif;
  --balivip-sans:'Jost',Helvetica,Arial,sans-serif;
}

html,body,button,input,select,textarea { font-family:var(--balivip-sans) !important; }
body { background-color:#F4F2ED !important; color:#2B2724 !important; font-weight:400; }
h1,h2,h3,h4,.sidebar-brand-title,.modal-title,.welcome-name,.chat-title,.vero-title,.vero-site-preview h3 {
  font-family:var(--balivip-serif) !important;
  letter-spacing:-.01em;
}

.sidebar,.icon-rail,.sidebar-user-bar,.chat-top-bar { background:#FDFCFA !important; }
.sidebar { border-color:rgba(43,39,36,.10) !important; }
.sidebar-brand-title { color:#2B2724 !important; font-size:23px !important; font-weight:500 !important; line-height:.95; }
.sidebar-brand-title small { display:block; font:500 8px/1 var(--balivip-sans); letter-spacing:.19em; color:#6B645C; margin-bottom:4px; }
/* The real BaliVIP mark, same file the website serves (/media/balivip-logo-blue.webp, 1024x263).
   The wordmark carries the brand; "VIP AI" sits under it as the product line. */
.sidebar-brand-title { display:flex !important; flex-direction:column; gap:5px; }
.sidebar-brand-title .balivip-mark { display:block; width:120px; max-width:100%; height:auto; }
.sidebar-brand-title .balivip-caption { display:block; width:78px; height:auto; opacity:.8; }
.vero-eyebrow .balivip-mark { display:inline-block; width:92px; height:auto; vertical-align:middle; margin-right:10px; }
.vero-eyebrow .balivip-caption { display:inline-block; width:58px; height:auto; vertical-align:middle; opacity:.8; }
/* The welcome splash carries the same mark, not a typed wordmark. */
#welcome-screen .welcome-name .aivip-mark { display:block; width:min(300px,62vw); height:auto; margin:0 auto 10px; }
#welcome-screen .welcome-name .aivip-caption { display:block; width:min(170px,36vw); height:auto; margin:0 auto; opacity:.85; }
.section-title,.vero-nav-label { color:#8A6F3C !important; font-weight:600 !important; letter-spacing:.12em !important; }
.list-item { border-radius:8px !important; }
.list-item:hover { background:#EFE9DC !important; color:#2B2724 !important; }
.list-item.active,.list-item.selected { background:#2B2724 !important; color:#FDFCFA !important; }
.icon-rail-btn:hover,.user-bar-btn:hover { background:#EFE9DC !important; color:#8A6F3C !important; }

.chat-container { background:#F4F2ED !important; }
.message.user .message-content,.user-message { background:#EFE9DC !important; border-color:rgba(168,137,78,.22) !important; }
.message.assistant .message-content,.assistant-message { background:#FDFCFA !important; border-color:rgba(43,39,36,.08) !important; }
.input-container,.input-shell,.composer-container { background:#FDFCFA !important; border-color:rgba(43,39,36,.16) !important; border-radius:16px !important; box-shadow:0 10px 30px rgba(43,39,36,.07) !important; }
#message { color:#2B2724 !important; }
#send-btn,.send-button { background:#2B2724 !important; color:#fff !important; border-radius:9px !important; }
#send-btn:hover,.send-button:hover { background:#A8894E !important; }

.modal-content,.settings-modal-content,.admin-card,.card,.tool-window { background:#FDFCFA !important; border-color:rgba(43,39,36,.14) !important; }
.modal-content,.settings-modal-content { border-radius:18px !important; box-shadow:0 28px 80px rgba(43,39,36,.18) !important; }
.settings-nav-item.active,.admin-btn-add,.primary-btn { background:#2B2724 !important; color:#fff !important; border-color:#2B2724 !important; }
.admin-btn-sm,button.secondary { border-color:rgba(43,39,36,.16) !important; border-radius:8px !important; }
input,select,textarea { background:#FDFCFA !important; color:#2B2724 !important; border-color:rgba(43,39,36,.18) !important; border-radius:8px !important; }
input:focus,select:focus,textarea:focus { border-color:#A8894E !important; outline-color:#A8894E !important; }

.vero-panel { background:#FDFCFA !important; color:#2B2724 !important; border-color:rgba(43,39,36,.14) !important; box-shadow:0 28px 80px rgba(43,39,36,.20) !important; }
.vero-card { background:#fff !important; border-color:rgba(43,39,36,.10) !important; }
.vero-button.primary,.vero-new { background:#2B2724 !important; border-color:#2B2724 !important; }
.vero-note { background:#EFE9DC !important; border-color:rgba(168,137,78,.26) !important; }
.vero-overlay { background:rgba(43,39,36,.34) !important; }

@media (max-width:760px) {
  .sidebar-brand-title { font-size:21px !important; }
  .modal-content,.settings-modal-content { border-radius:15px !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Phone and installed-app layer. Added 2026-09-17 after the workspace went
   live on ai.balivipwedding.com: the team reads this on a phone between
   meetings, and the sales side works entirely from one.

   Three things break an otherwise fine desktop layout on a phone, and all
   three are handled here: browser chrome that steals height (use dvh, not
   vh), the notch and home indicator (safe-area insets), and tables that are
   wider than the screen (scroll them, never squash them).
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* 100vh is the height WITHOUT the address bar, so the composer sat under it. */
  .vero-panel { max-height: 100dvh !important; }
  .vero-overlay { padding: 0 !important; }

  /* The notch, the rounded corners and the home indicator. */
  .vero-topbar { padding-top: calc(14px + env(safe-area-inset-top)); }
  .vero-body   { padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important; }

  /* Four metric cards side by side become unreadable slivers; two is the floor. */
  .vero-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .vero-grid.two{ grid-template-columns: 1fr !important; }
  .vero-metric  { font-size: 20px !important; line-height: 1.15; }
  .vero-card    { padding: 13px !important; }

  /* A table is the one thing that must keep its shape: scroll it sideways with
     momentum rather than wrapping every cell into a column of fragments. */
  .vero-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .vero-table      { min-width: 560px; }

  /* Thumb targets. Anything tappable gets 44px, the size a thumb actually hits. */
  .vero-button, .vero-tab, .vero-input, .list-item { min-height: 44px; }
  .vero-actions .vero-button { flex: 1 1 auto; justify-content: center; }
  /* iOS zooms the whole page when a focused field is under 16px. */
  .vero-input, input, select, textarea { font-size: 16px !important; }

  /* A row built as label-left value-right has no room; stack it. */
  .vero-mini-row { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* The marks scale down rather than pushing the nav out of the viewport. */
  .sidebar-brand-title .balivip-mark { width: 104px; }
  .vero-eyebrow .balivip-mark { width: 78px; }
  .vero-eyebrow .balivip-caption { display: none; }
}

/* Installed to the home screen: no browser chrome, so the app owns the notch. */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  /* An installed app that bounces like a web page feels broken. */
  html, body { overscroll-behavior-y: none; }
}