:root {
  --brand-primary:#173C32;
  --brand-primary-hover:#14342B;
  --brand-primary-soft:#E8F0ED;
  --brand-primary-foreground:#FFFFFF;
  --brand-secondary:#28785E;
  --brand-secondary-soft:#E9F3EF;
  --brand-secondary-foreground:#FFFFFF;
  --font-heading:"Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html, body, button, input, textarea, select { font-family:var(--font-body); }
h1, h2, h3, h4, .brand, .panel-heading strong, .message-author { font-family:var(--font-heading); }

.primary,
.new-chat-button,
.loader-brand,
.assistant-avatar,
.profile-avatar,
.thinking-brand,
.preview-shell header,
.preview-shell .primary { background:var(--brand-primary); color:var(--brand-primary-foreground); }
.primary:hover,
.new-chat-button:hover,
.preview-shell .primary:hover { background:var(--brand-primary-hover); }

.app-header,
.intro { background:var(--brand-primary); }
.brand-mark,
.eyebrow,
.message-author,
.account-icon,
.nav-item span,
.brand-control > span { color:var(--brand-secondary); }
.nav-item.active,
.admin-notice,
.preview-chip { background:var(--brand-secondary-soft); color:var(--brand-primary); }
input:focus,
textarea:focus,
select:focus { border-color:var(--brand-secondary); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-secondary) 18%, transparent); }
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline:3px solid color-mix(in srgb, var(--brand-secondary) 28%, transparent); outline-offset:2px; }

.brand-logo-active { padding:3px; background:transparent!important; color:transparent!important; border-color:color-mix(in srgb, var(--brand-secondary) 42%, transparent); }
.brand-logo-active img { width:100%; height:100%; object-fit:contain; display:block; }
.loader-brand.brand-logo-active,
.assistant-avatar.brand-logo-active { padding:4px; border:1px solid color-mix(in srgb, var(--brand-secondary) 32%, transparent); }

.global-config-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,360px); gap:26px; align-items:start; }
.global-config-form { display:grid; gap:18px; }
.global-config-block { padding:18px; border:1px solid rgba(20,33,29,.08); border-radius:16px; background:#fffefa; }
.global-config-block h4 { margin:0 0 12px; font-size:1.05rem; letter-spacing:-.01em; }
.brand-color-grid,
.brand-font-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.brand-control { display:grid; gap:8px; margin:0; font-size:.78rem; font-weight:850; }
.brand-control div { display:grid; grid-template-columns:52px 1fr; gap:8px; align-items:center; }
.brand-control input[type="color"] { width:52px; height:42px; padding:3px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; }
.brand-control input:not([type="color"]),
.brand-control select { min-height:42px; padding:10px 11px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); font:inherit; }
.brand-control small { min-height:18px; color:#a63b32; font-size:.7rem; font-weight:700; }

.transparent-checker { background-color:#fff!important; background-image:linear-gradient(45deg,#dfe7e2 25%,transparent 25%),linear-gradient(-45deg,#dfe7e2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dfe7e2 75%),linear-gradient(-45deg,transparent 75%,#dfe7e2 75%)!important; background-position:0 0,0 8px,8px -8px,-8px 0!important; background-size:16px 16px!important; color:var(--brand-primary)!important; border:1px solid var(--line); }
.brand-preview.has-image img,
.favicon-preview.has-image img,
.preview-logo.has-image img { width:100%; height:100%; object-fit:contain; padding:4px; display:block; }
.favicon-preview.has-image img { padding:2px; }

.brand-live-preview { position:sticky; top:18px; padding:18px; border:1px solid rgba(20,33,29,.08); border-radius:18px; background:#fbfaf6; box-shadow:0 14px 38px rgba(20,33,29,.08); }
.preview-shell { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#fff; font-family:var(--font-body); }
.preview-shell header { display:flex; align-items:center; gap:10px; padding:13px 14px; }
.preview-logo { width:32px; height:32px; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(255,255,255,.28); border-radius:9px; font-weight:900; }
.preview-body { display:grid; gap:10px; padding:16px; }
.preview-body h4 { margin:0; color:var(--brand-primary); font-family:var(--font-heading); font-size:1.35rem; }
.preview-body p { margin:0; color:var(--muted); line-height:1.45; }
.preview-chip { width:max-content; padding:5px 9px; border-radius:999px; font-size:.7rem; font-weight:900; }
.preview-body .primary,
.secondary-preview { width:100%; margin:0; padding:11px 12px; border-radius:10px; font-weight:850; cursor:pointer; }
.secondary-preview { border:1px solid color-mix(in srgb, var(--brand-secondary) 45%, white); background:var(--brand-secondary-soft); color:var(--brand-primary); }
.brand-save-state { margin:12px 0 0; color:var(--muted); font-size:.78rem; }
#global-save:disabled { opacity:.52; cursor:not-allowed; }

@media(max-width:980px) {
  .global-config-layout { grid-template-columns:1fr; }
  .brand-live-preview { position:static; }
}
@media(max-width:680px) {
  .brand-color-grid,
  .brand-font-grid { grid-template-columns:1fr; }
  .global-config-block { padding:14px; }
  .brand-control div { grid-template-columns:48px 1fr; }
}

/* Mobile conversation shell: header arriba, contenido al centro y composer fijo abajo. */
@media(max-width:720px) {
  html,
  body { height:100%; overflow:hidden; }

  .chat-app,
  .chat-app.sidebar-collapsed {
    height:100dvh;
    min-height:100dvh;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:72px minmax(0,1fr);
    overflow:hidden;
  }

  .app-header {
    position:relative;
    z-index:80;
    grid-column:1;
    grid-row:1;
    display:grid;
    grid-template-columns:42px minmax(0,1fr) minmax(0,auto);
    gap:10px;
    min-height:72px;
    padding:calc(8px + env(safe-area-inset-top)) 14px 8px;
    box-shadow:0 2px 14px rgba(20,33,29,.18);
  }

  .menu-toggle {
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    padding:0;
    border-radius:10px;
    font-size:1.65rem;
  }

  .sidebar-collapse-button { display:none!important; }

  .app-brand {
    min-width:0;
    justify-self:start;
    gap:10px;
    font-size:1rem;
    letter-spacing:.12em;
  }

  .app-header .app-brand .brand-mark {
    width:38px;
    height:38px;
    flex:none;
  }

  .workspace-switcher {
    justify-self:end;
    max-width:42vw;
    min-width:0;
    padding:8px 10px;
    border-radius:10px;
  }
  .workspace-switcher span { display:none; }
  .workspace-switcher strong {
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.72rem;
  }

  .chat-view,
  .connections-view,
  .account-view {
    grid-column:1!important;
    grid-row:2!important;
    min-width:0;
    min-height:0;
  }

  .chat-view {
    height:100%;
    overflow:hidden;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
  }

  .chat-view::before { inset:68px 0 0; }

  .chat-header {
    min-height:68px;
    padding:10px 16px;
    gap:10px;
    background:rgba(255,254,250,.98);
  }

  .assistant-avatar {
    width:42px;
    height:42px;
    flex:none;
    border-radius:13px;
  }

  .chat-header-copy { min-width:0; }
  .chat-header-copy strong { font-size:.9rem; }
  .chat-header-copy span { font-size:.7rem; }

  .message-stream {
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:18px 14px 24px;
    scroll-padding-bottom:18px;
  }

  .message,
  .purchase-summary,
  .receipt-review,
  .chat-actions,
  .chat-processing-indicator {
    max-width:94%;
  }

  .composer {
    position:relative;
    z-index:25;
    width:100%;
    margin:0;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    border-top:1px solid color-mix(in srgb, var(--line) 80%, transparent);
    background:rgba(255,254,250,.98);
    box-shadow:0 -8px 24px rgba(20,33,29,.06);
    backdrop-filter:blur(10px);
  }

  .composer textarea {
    min-height:46px;
    max-height:128px;
    padding:11px 14px;
    border-radius:24px;
  }

  .attach-button,
  .send-button {
    width:46px;
    height:46px;
    flex:0 0 46px;
  }

  .composer > p { display:none; }

  .app-sidebar {
    position:fixed!important;
    z-index:110;
    inset:0 auto 0 0;
    width:min(88vw,360px)!important;
    height:100dvh;
    min-height:100dvh;
    padding:calc(20px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
    border-right:1px solid color-mix(in srgb, var(--line) 80%, transparent);
    background:#fffefa;
    box-shadow:18px 0 44px rgba(20,33,29,.18);
    transform:translateX(-105%);
    transition:transform .22s ease;
    overflow:hidden;
  }

  .app-sidebar.open { transform:translateX(0); }
  .app-sidebar .new-chat-button { min-height:52px; margin-top:58px; border-radius:14px; }
  .app-sidebar nav { margin-top:16px; }
  .app-sidebar .recent-chats { overflow-y:auto; padding-bottom:8px; }

  .sidebar-backdrop:not(.hidden) {
    position:fixed;
    z-index:100;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    padding:0;
    border:0;
    background:rgba(15,28,24,.42);
    backdrop-filter:blur(2px);
  }

  .sidebar-collapsed .app-sidebar { padding-inline:16px; }
  .sidebar-collapsed .new-chat-button { height:auto; padding:12px; font-size:inherit; }
  .sidebar-collapsed .new-chat-button span { font-size:inherit; }
  .sidebar-collapsed .nav-item { justify-content:flex-start; padding:11px 12px; font-size:inherit; }
  .sidebar-collapsed .nav-item span { font-size:inherit; }
  .sidebar-collapsed .sidebar-divider,
  .sidebar-collapsed .sidebar-label,
  .sidebar-collapsed .recent-chats { display:block; }
  .sidebar-collapsed .account-button { justify-content:flex-start; padding:10px 11px; }
  .sidebar-collapsed .account-button strong,
  .sidebar-collapsed .account-chevron { display:block; }

  .account-menu {
    position:fixed;
    z-index:130;
    left:16px;
    right:16px;
    bottom:calc(16px + env(safe-area-inset-bottom));
  }
}

/* Mobile navigation refinement: conversation owns the top bar; workspace lives in the drawer. */
@media(max-width:720px) {
  .chat-app,
  .chat-app.sidebar-collapsed {
    grid-template-rows:minmax(0,1fr);
  }

  .app-header {
    display:contents;
  }

  .sidebar-collapse-button { display:none!important; }

  .menu-toggle {
    position:fixed;
    z-index:92;
    top:calc(env(safe-area-inset-top) + 13px);
    left:14px;
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    padding:0;
    border:0;
    border-radius:10px;
    background:transparent;
    color:var(--brand-primary);
    font-size:1.55rem;
    line-height:1;
  }

  .chat-app:has(.app-sidebar.open) .menu-toggle {
    opacity:0;
    pointer-events:none;
  }

  .app-brand,
  .workspace-switcher {
    display:none;
  }

  .chat-view,
  .connections-view,
  .account-view {
    grid-row:1!important;
  }

  .chat-header {
    min-height:66px;
    padding:10px 14px 10px 62px;
  }

  .assistant-avatar {
    width:40px;
    height:40px;
    border-radius:12px;
  }

  .chat-header-copy strong {
    font-size:.9rem;
    line-height:1.2;
  }

  .chat-header-copy span {
    margin-top:1px;
    font-size:.69rem;
    line-height:1.2;
  }

  .app-sidebar {
    padding-top:calc(88px + env(safe-area-inset-top));
  }

  .app-sidebar::before {
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    right:0;
    height:calc(72px + env(safe-area-inset-top));
    background:var(--brand-primary);
    box-shadow:0 2px 12px rgba(20,33,29,.16);
  }

  .app-sidebar .new-chat-button {
    margin-top:0;
  }

  .chat-app:has(.app-sidebar.open) .app-brand {
    position:fixed;
    z-index:125;
    top:calc(env(safe-area-inset-top) + 16px);
    left:18px;
    display:flex;
    align-items:center;
    pointer-events:none;
  }

  .chat-app:has(.app-sidebar.open) .app-brand > span:last-child {
    display:none;
  }

  .chat-app:has(.app-sidebar.open) .app-brand .brand-mark {
    width:36px;
    height:36px;
    flex:none;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
  }

  .chat-app:has(.app-sidebar.open) .workspace-switcher {
    position:fixed;
    z-index:125;
    top:calc(env(safe-area-inset-top) + 12px);
    left:76px;
    width:min(calc(88vw - 94px),266px);
    min-width:0;
    height:44px;
    display:grid;
    align-content:center;
    justify-items:end;
    gap:1px;
    padding:5px 10px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:white;
    text-align:right;
    pointer-events:none;
  }

  .chat-app:has(.app-sidebar.open) .workspace-switcher span {
    display:block;
    color:rgba(255,255,255,.66);
    font-size:.6rem;
    line-height:1;
  }

  .chat-app:has(.app-sidebar.open) .workspace-switcher strong {
    max-width:100%;
    color:white;
    font-size:.76rem;
    line-height:1.15;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}