/* Compact screens use the rail or bottom navigation. */
.vi-brand, .studio-nav, .studio-inbox-title { display: none; }

.vi-tags { padding: 10px 0; }
.vi-tags summary { cursor: pointer; font-size: 12px; font-weight: 650; }
.vi-tags summary span { float: right; color: var(--brand); font-weight: 500; }
.vi-tags .customer-tag-editor { margin: 8px 0; }

@media (min-width: 901px) {
  html[data-theme] .chat-focused {
    --brand: light-dark(#533eaa, #baa7ff);
    --brand-soft: light-dark(#f0ebfa, #312943);
    --border: light-dark(#dce2ed, #484457);
    --ink: light-dark(#1e2940, #f0ecf9);
    grid-template-columns: minmax(0, 1fr);
    font-family: "Alibaba PuHuiTi", "PingFang SC", Arial, sans-serif;

    .sidebar { display: none; }
    .topbar {
      height: 60px; padding: 0 20px; gap: 18px; justify-content: space-between;
      color: white; border: 0; position: relative; z-index: 25;
    }
    .vi-brand, .studio-nav { display: flex; align-items: center; }
    .vi-brand { white-space: nowrap; }
    .vi-brand img { width: 31px; height: 31px; padding: 4px; background: white; border-radius: 8px; }
    .vi-brand b { color: white; font-size: 16px; }
    .vi-brand span { padding-left: 12px; border-left: 1px solid #ffffff40; font-size: 12px; }
    .studio-nav { align-self: stretch; gap: 3px; margin-right: auto; }
    .studio-nav button, .studio-nav summary {
      display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
      white-space: nowrap; padding: 8px 12px; border-radius: 7px; color: #eef1ff;
    }
    .studio-nav button:hover, .studio-nav summary:hover { background: #ffffff20; }
    .studio-nav svg { width: 16px; height: 16px; }
    .studio-nav details { position: relative; }
    .studio-nav summary { cursor: pointer; }
    .studio-nav summary::after { content: "⌄"; }
    .studio-nav details > div {
      position: absolute; top: 36px; min-width: 156px; padding: 5px; background: light-dark(white, #222335);
      border: 1px solid light-dark(#d9e1f0, #4b475d); border-radius: 8px; box-shadow: 0 8px 28px #14264b22;
    }
    .studio-nav details button { width: 100%; color: light-dark(#263650, #ece7fa); }
    .studio-nav details button:hover { background: light-dark(#eef3fc, #342f49); }
    .top-actions { gap: 7px; color: #e4ebf8; }
    .main-inbox { height: calc(100dvh - 60px); padding: 12px; max-width: none; }
    .workbench { border: 0; background: transparent; box-shadow: none; }
    .inbox-grid { background: transparent; gap: 11px; grid-template-columns: clamp(248px,19vw,334px) minmax(0,1fr); }
    .inbox-grid:has(.drawer-open) { grid-template-columns: clamp(248px,19vw,334px) minmax(0,1fr) clamp(276px,20vw,350px); }
    :is(.lead-list,.chat,.customer-sidebar.drawer-open) { background: light-dark(white, #222335); border: 1px solid var(--border); }
    .lead-list { padding-bottom: 8px; scrollbar-width: thin; }
    .studio-inbox-title { display: flex; align-items: center; gap: 9px; }
    .studio-inbox-title span { font-weight: 650; padding: 2px 7px; border-radius: 6px; font-size: 12px; }
    .inbox-filters { padding: 6px 14px; border-bottom: 0; }
    .inbox-filters .search { background: light-dark(white, #222335); border-color: light-dark(#d1dcee, #504960); height: 34px; }
    .inbox-filters .tabs { display: flex; padding: 3px; border-radius: 8px; gap: 2px; }
    .inbox-filters .tab { flex: 1; background: transparent; color: light-dark(#546278, #c3bcd2); padding: 5px 4px; }
    .list-head { padding: 7px 16px; border: 0; background: transparent; }
    .lead-item { margin: 3px 7px; }
    .lead-item .lead-row {
      width: 100%; margin: 0; padding: 10px 25px 10px 9px; gap: 9px;
      border-radius: 9px; border: 1px solid transparent; border-bottom-color: light-dark(#e3e9f3, #393749); background: transparent; box-shadow: none;
    }
    .lead-copy { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 7px; align-items: center; }
    .lead-copy > :is(.lead-line,.lead-preview,.lead-meta,.customer-tag-chips,.conversation-markers,.search-match) { grid-column: 1/-1; }
    .lead-preview,.lead-meta,.lead-source,.customer-tag-chips { margin-top: 0; }
    .lead-meta { display: flex; justify-content: flex-start; gap: 6px; }
    .lead-line strong { font-size: 14px; color: light-dark(#213251, #f2eefc); }
    .lead-preview { font-size: 13px; color: light-dark(#45546d, #d0cbdf); }
    .lead-copy > .lead-location { display: flex; gap: 6px; grid-column: 2; margin: 0; }
    .lead-copy > .lead-source { grid-column: 1; }
    .lead-copy > :is(.lead-location,.lead-source) { font-size: 10.5px; color: light-dark(#596882, #b9b2cc); }
    .conversation-markers:empty { display: none; }
    .lead-menu-trigger { width: 21px; height: 21px; border: 0; top: 36px; background: transparent; }
    .lead-row .avatar,.chat-head .avatar { width: 36px; height: 36px; }
    .chat { overflow: hidden; }
    .chat-head { padding: 12px 18px; min-height: 76px; border-bottom: 0; }
    .chat-head .customer-name-edit { font-size: 20px; }
    .chat-name p,.customer-location { font-size: 11px; color: light-dark(#596982, #b9b2cc); }
    .chat-head .text-button,.composer-tools .text-button { font-size: 12px; }
    .ai-toolbar { padding: 4px 18px; border-block: 1px solid var(--border); }
    .messages { padding: 14px 22px; }
    .msg-context,.msg-foot { color: light-dark(#63718a, #bab5cc); font-size: 11px; }
    .bubble { background: light-dark(white, #222335); border: 1px solid var(--border); border-radius: 3px 12px 12px; padding: 10px 14px; font-size: 15px; line-height: 1.52; }
    .out .bubble { border-radius: 12px 3px 12px 12px; }
    .message:not(.out):has(.translation) { display: grid; grid-template-columns: minmax(0,1fr); width: fit-content; max-width: 85%; }
    .message:not(.out):has(.translation) > .bubble { border-radius: 5px 12px 0 0; border-bottom: 0; padding-bottom: 7px; }
    .message:not(.out):has(.translation) > .translation-slot { margin: 0; border-radius: 0 0 12px 5px; border: 1px solid light-dark(#d8e1ee, #474456); border-top: 0; background: light-dark(white, #222335); width: 100%; max-width: none; }
    .message:not(.out) .translation { margin: 0 12px; padding: 6px 1px 9px; border: 0; border-top: 1px solid light-dark(#e1e7f0, #484456); }
    .translation > span { font-size: 10px; letter-spacing: .025em; }
    .composer:not(.composer-expanded) { padding: 9px 15px; background: light-dark(white, #222335); box-shadow: 0 -4px 14px #223a6108; }
    .composer:not(.composer-expanded) textarea#compose { min-height: 70px; }
    .compose-content:not(:has(.quote-composer)) #compose { border-radius: 9px 9px 0 0; border-color: light-dark(#ccd8eb, #514b65); font-size: 15px; }
    .composer .inline-preview.has-draft { margin: 0 0 3px; padding: 8px 12px; border: 1px solid light-dark(#ccd8eb, #514b65); border-top: 0; border-radius: 0 0 9px 9px; }
    .compose-bottom .btn.primary { padding: 8px 19px; border-radius: 8px; font-weight: 650; }
    .customer-sidebar-head { padding: 17px 16px 10px; }
    .customer-identity {
      position: relative; isolation: isolate; overflow: hidden; flex-shrink: 0;
      color: white; margin: 0 12px 12px; padding: 17px 13px; min-height: 100px; border-radius: 10px;
    }
    .customer-identity::before { content: ""; position: absolute; inset: -30% -12% -40% 40%; z-index: -1; background: url("/assets/dolphingo-logo.png") center/contain no-repeat; filter: brightness(0) invert(1); pointer-events: none; }
    .customer-identity :is(.customer-name-edit,.icon-button,p,p>span) { color: white; }
    .customer-identity .customer-name-edit { font-size: 19px; }
    .customer-identity .avatar { width: 42px; height: 42px; border-radius: 14px; }
    .customer-identity .customer-tag-chips { margin-top: 5px; }
    .panel-tabs { margin: 0 12px 8px; border: 0; padding: 3px; }
    .panel-tabs button.active { background: light-dark(white, #222335); }
    .customer-panel-scroll { padding: 0 15px 14px; }
    .customer-panel-scroll .section-label { font-size: 14px; margin: 16px 0 8px; }
    .vi-tags { padding: 11px; border: 1px solid light-dark(#dce4f0, #4a435c); border-radius: 8px; background: light-dark(#f9fbfe, #272435); }
    .customer-fact { font-size: 12px; margin: 9px 0; }
    .customer-tag-chip { border-radius: 5px; }
    @media (hover: hover) {
      .message-footer .message-actions { opacity: 0; }
      .message:hover .message-actions,.message:focus-within .message-actions { opacity: 1; }
    }
    @media (max-width: 1350px) {
      .vi-brand span { display: none; }
      .studio-nav button,.studio-nav summary { padding: 7px; }
      .topbar { padding-inline: 12px; gap: 9px; }
    }
  }
}
/* The brand palette applies at every width, independently of the pane layout. */
html[data-theme] .chat-focused{
 --iris:#5635c6;--iris-dark:#332274;--apricot:#ffb477;--midnight:light-dark(#202046, #f0ebff);
 --mist:light-dark(#eeeaff, #332d45);--sky:#d8f2ff;
 .topbar{background:linear-gradient(104deg,#282063 0%,#48309b 30%,#553cc2 58%,#293a96 100%);box-shadow:0 3px 14px #39267828}
 .vi-brand b{font-weight:780;letter-spacing:.095em}
 .vi-brand span{color:#f0e9ff}
 .studio-nav button.active{background:#ffe6cc;color:#4b2664;box-shadow:0 2px 8px #28166025}
 .top-actions :is(.btn,.theme-toggle,.icon-button,select,.pill){background:#33277e;color:white;border-color:#796ccc}
 .top-actions .pill.demo{background:#48348e;color:#ffebdb}
 .main-inbox{background:radial-gradient(ellipse at 0 0,light-dark(#d9dcff, #272642),transparent 58%),radial-gradient(ellipse at 96% 90%,light-dark(#f8dcd5, #322530),transparent 40%),light-dark(#e9e8f9, #181824)}
 :is(.lead-list,.customer-sidebar.drawer-open,.chat){border-color:light-dark(#d9d6ec, #454153);box-shadow:0 3px 13px #3b2b6b0f;border-radius:16px}
 .lead-list{background:light-dark(#fcfaff, #201f2d)}
 .studio-inbox-title{position:relative;isolation:isolate;overflow:hidden;padding:15px 16px 13px;background:linear-gradient(115deg,light-dark(#eee7ff, #35304e),light-dark(#e0e9ff, #292f4c));border-bottom:1px solid light-dark(#d8d5f1, #48435f)}
 .studio-inbox-title:after{content:"";position:absolute;z-index:-1;right:-2px;top:-27px;width:92px;height:92px;background:url("/assets/dolphingo-logo.png") center/contain no-repeat;opacity:.12;transform:rotate(-14deg)}
 .studio-inbox-title strong,.customer-sidebar-head strong{color:var(--midnight);font-size:20px;font-weight:720}
 .studio-inbox-title span{color:white;background:#6045b6}
 .inbox-filters{padding-top:10px;background:light-dark(#fcfaff, #201f2d)}
 .inbox-filters .tabs{background:light-dark(#f0ebf8, #302c40)}
 .inbox-filters .tab.active{background:var(--iris);color:white}
 .inbox-filters .tab.active span{color:#fff}
 .list-head{color:light-dark(#655a79, #beb8ce)}
 .lead-item .lead-row.selected{border-color:light-dark(#baa7ee, #9984d2);background:linear-gradient(105deg,light-dark(#e6ddff, #40345e),light-dark(#eee9ff, #38314d) 65%,light-dark(#fff1e6, #41313d));box-shadow:inset 4px 0 var(--iris)}
 .lead-item .lead-row:hover:not(.selected){background:light-dark(#f2effc, #302c40)}
 .lead-menu-trigger{color:light-dark(#6b5098, #c5b1ed)}
 .lead-row .avatar,.chat-head .avatar{border-radius:13px;font-weight:740;font-size:14px;border:1px solid #ffffff85}
 .lead-row .avatar.v0,.chat-head .avatar{background:linear-gradient(140deg,#ffdc9f,#ffad91);color:#50283f}
 .lead-row .avatar.v1{background:linear-gradient(140deg,#d3c5ff,#aaaeff);color:#302568}
 .lead-row .avatar.v2{background:linear-gradient(140deg,#b2edff,#8cc8fd);color:#153e63}
 .lead-row .avatar.v3{background:linear-gradient(140deg,#ffd4e7,#ecabc7);color:#612a4d}
 .unread-badge{background:#b1384b;color:#fff}
 .customer-tag-chip{border-color:light-dark(#b8d4f7, #44647b);color:light-dark(#1c5486, #bde5ff);background:light-dark(#e0f0ff, #233c50)}
 .customer-tag-chip:is(.tag-tone-1,.tag-tone-4){background:light-dark(#ece3ff, #383048);border-color:light-dark(#d2bdf1, #635579);color:light-dark(#68409b, #e1c8ff)}
 .customer-tag-chip:is(.tag-tone-2,.tag-tone-5){background:light-dark(#ffead4, #483327);border-color:light-dark(#f5c196, #806047);color:light-dark(#86420e, #ffd1a4)}
 .chat-head{background:linear-gradient(99deg,light-dark(#fff, #222335) 63%,light-dark(#f4f0ff, #302b40));border-top:3px solid #9679df}
 .chat-head .customer-name-edit{font-weight:720;letter-spacing:-.035em;color:light-dark(#242044, #f4efff)}
 .ai-toolbar{background:light-dark(#f5f2fc, #282535);border-color:light-dark(#e2daee, #443e56)}
 .messages{background:radial-gradient(ellipse at 4% 5%,light-dark(#e9e7fd, #27243b) 0%,transparent 53%),radial-gradient(ellipse at 98% 70%,light-dark(#dff2fc, #1e2c3b) 0%,transparent 48%),light-dark(#f7f6fb, #1c1c28)}
 .bubble{border-color:light-dark(#dbd5ec, #494557);color:light-dark(#292c46, #f4effb)}
 .out .bubble{background:linear-gradient(110deg,light-dark(#5040ac, #494081),light-dark(#3c55ae, #364d81));color:white;border-color:light-dark(#464eab, #6a65a1);box-shadow:0 3px 7px #37358a1a}
 .out .bubble :is(a,button){color:#fff;text-decoration:underline}
 .message:not(.out) .translation{background:transparent;color:light-dark(#434861, #ddd6ed)}
 .composer .inline-preview.has-draft{background:linear-gradient(105deg,light-dark(#eeeaff, #332d45),light-dark(#edf4ff, #283447));border-color:light-dark(#d4cbea, #534963)}
 .composer .preview-label{color:light-dark(#573aa5, #d3b6ff);font-weight:650}
 .compose-bottom .btn.primary{background:linear-gradient(105deg,#6731c5,#414ab7);border-color:#5941b1;color:white;box-shadow:0 3px 8px #5144aa30}
 .customer-sidebar-head{background:light-dark(white, #222335)}
 .customer-identity{background:radial-gradient(ellipse 54% 150% at 108% 110%,light-dark(#ffd491, #9d6757) 0%,light-dark(#ff9e83, #774c63) 42%,transparent 77%),linear-gradient(116deg,light-dark(#38288b, #312553) 6%,light-dark(#673fb6, #50367c) 56%,light-dark(#a768b2, #704b79) 86%);box-shadow:0 4px 11px #6540a129}
 .customer-identity:before{opacity:.19;right:-20%;transform:rotate(-12deg)}
 .customer-identity .avatar{background:#fce0bb;color:#4a2b56;border-color:#ffffffb0;font-weight:700}
 .customer-identity p>span.tag{background:#342068!important;color:white!important;border-color:#b4a4e2!important}
 .customer-identity .icon-button{background:#442281b3;color:white;border-radius:8px}
 .panel-tabs{background:light-dark(#f2edf9, #2d293a)}
 .panel-tabs button.active{color:light-dark(#542fa7, #d8bfff);box-shadow:0 1px 4px #473b721c}
 .need-content{background:light-dark(#fff1de, #3e3027);border:1px solid light-dark(#f1d9b6, #66503d);border-left:3px solid #e68846;color:light-dark(#67402a, #ffdfbf)}
 .location-card{background:linear-gradient(105deg,light-dark(#eef6ff, #263344),light-dark(#f6f4ff, #302b40));border-color:light-dark(#d6e0ef, #48445d)}
 .customer-panel-scroll .section-label{color:var(--midnight)}
}

@media (min-width: 901px) and (max-width: 1100px) {
  html[data-theme] .chat-focused {
    .topbar { height: auto; min-height: 52px; padding-block: 6px; flex-wrap: wrap; gap: 6px 10px; }
    .workspace { display: flex; flex-direction: column; height: 100dvh; }
    .main-inbox { height: auto; flex: 1; min-height: 0; }
    .top-actions { gap: 4px; flex-wrap: wrap; }
    .project-picker select { min-width: 85px; max-width: 110px; }
    .vi-brand span { display: none; }
    .inbox-grid { grid-template-columns: 200px minmax(0,1fr); gap: 6px; }
    .inbox-grid:has(.customer-sidebar.drawer-open) { grid-template-columns: 200px minmax(0,1fr) 235px; }
    .customer-sidebar.drawer-open { display: flex; position: static; width: auto; }
    .chat-head { flex-wrap: wrap; }
  }
}
@media (max-width: 900px) {
  html[data-theme] .chat-focused {
    .topbar { color: white; }
    .topbar::before, .top-actions .project-picker { color: white; }
    .customer-identity { color: white; border-radius: 10px; margin: 0 10px 8px; padding: 12px; }
    .customer-identity :is(.customer-name-edit,p,p>span) { color: white; }
    .chat-head .avatar, .lead-row .avatar { border-radius: 12px; }
    .top-actions { min-width: 0; max-width: 100%; overflow-x: auto; }
  }
}