/* The cabin edition: tactile surfaces, inset instruments, a continuous light seam. */
:root, body[data-ambient="champagne"] {
  --cabin-accent: #d7bf97; --cabin-rgb: 215 191 151; --cabin-muted: #9d9688;
  --cabin-ink: #0d1012; --cabin-ivory: #eae6dc;
}
body[data-ambient="glacier"] { --cabin-accent: #b4d5e3; --cabin-rgb: 180 213 227; --cabin-muted: #929fa6; }
body[data-ambient="amethyst"] { --cabin-accent: #c8b8e4; --cabin-rgb: 200 184 228; --cabin-muted: #a197aa; }
body { background: var(--cabin-ink); }
.app-shell { grid-template-columns: 286px minmax(0, 1fr); }
.sidebar {
  padding: 30px 21px 20px; border-right: 1px solid #000;
  background: radial-gradient(ellipse at 0 0, #3a36302e, transparent 45%), linear-gradient(105deg, #1d1e1f, #131618 63%, #0d1113);
  box-shadow: inset -4px 0 8px #0004, 8px 0 30px #0002;
}
.sidebar::before { opacity: .044; background: url('/cabin-grain-v15.svg'); }
.sidebar::after {
  display: block; content: ''; pointer-events: none; position: absolute; top: 63px; bottom: 20px; right: 2px; width: 1px;
  background: linear-gradient(transparent, rgb(var(--cabin-rgb) / .64) 12%, rgb(var(--cabin-rgb) / .14) 55%, transparent);
  box-shadow: -3px 0 14px rgb(var(--cabin-rgb) / .14);
}
.sidebar-top { padding: 0 6px 28px; position: relative; }
.identity { gap: 15px; }
.identity-mark {
  width: 45px; height: 49px; border-radius: 50%; border: 1px solid #adada681;
  background: linear-gradient(145deg, #c4c1b5, #4c5051 9%, #202526 13%, #121719 65%, #4e504d 96%, #b2b2a3);
  box-shadow: inset 0 0 0 3px #151a1c, inset 0 0 0 4px #bdbba926, 0 4px 9px #0008;
}
.identity-mark .brand-glyph { width: 25px; height: 30px; color: #dddcd3; filter: drop-shadow(0 1px #fff5) drop-shadow(0 2px 2px #000); }
.identity strong { color: #eee9df; font-size: 20px; letter-spacing: .055em; font-weight: 500; }
.identity-sub { font-size: 7px; font-weight: 450; letter-spacing: .14em; color: #aaa89e; }
.new-chat {
  position: relative; min-height: 58px; margin-bottom: 11px; padding: 13px 15px; overflow: hidden;
  border-radius: 8px; border: 1px solid #e9e3d0b5;
  background: linear-gradient(115deg, #ece4d5 0%, #d4cbb9 34%, #aaa99e 72%, #dad5c9 100%);
  box-shadow: inset 0 1px #fff9, inset 0 -2px #5e615331, 0 7px 18px #0006, 0 1px 0 #000;
}
.new-chat::before { display: block; content: ''; position: absolute; inset: 3px; height: auto; border: 1px solid #fff5; border-radius: 5px; background: none; pointer-events: none; }
.new-chat::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, #fff0 0 2px, #ffffff07 2px 3px); }
.new-chat-icon { color: #42473f; }
.new-chat-copy strong { font-size: 13px; color: #2c332e; text-shadow: 0 1px #ffffff65; }
.new-chat-arrow { color: #5b6158; }
.new-chat:hover { border-color: #faf0db; background: linear-gradient(115deg, #f6eee0, #ded5c3 40%, #bbb9ab 76%, #e4dfd1); box-shadow: inset 0 1px #fff, 0 7px 21px #0006; }
.new-chat:active { transform: translateY(1px); box-shadow: inset 0 2px 4px #353c3436, 0 2px 5px #0007; }
.studio-nav {
  position: relative; gap: 6px; padding: 14px 0 24px; margin-bottom: 3px; border-bottom-color: transparent;
}
.studio-nav::after {
  content: ''; position: absolute; bottom: 0; left: -7px; right: -7px; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--cabin-rgb) / .63) 30%, rgb(var(--cabin-rgb) / .34) 70%, transparent);
  box-shadow: 0 1px 6px rgb(var(--cabin-rgb) / .22), 0 5px 19px rgb(var(--cabin-rgb) / .09); pointer-events: none;
}
.studio-nav-item { min-height: 49px; padding: 6px 9px; gap: 12px; font-size: 12px; font-weight: 450; color: #c7c8c2; border-radius: 7px; }
.studio-nav-item > .ui-icon:first-child {
  width: 33px; height: 33px; padding: 7px; color: #d4d0c2; border-radius: 9px; border: 1px solid #aeb4b42d;
  background: linear-gradient(145deg, #393c3c80, #11181aa6 80%);
  box-shadow: inset 0 1px #e5e2ce15, inset 0 -1px #0006, 0 2px 5px #0003; stroke-width: 1.35;
}
.studio-nav-item:hover { background: linear-gradient(100deg, rgb(var(--cabin-rgb) / .065), #ffffff02); border-color: rgb(var(--cabin-rgb) / .13); }
.studio-nav-item:hover > .ui-icon:first-child { color: var(--cabin-accent); border-color: rgb(var(--cabin-rgb) / .4); box-shadow: inset 0 1px #ffffff25, 0 3px 7px #0005; }
body:has(#model-dialog:not([hidden])) #sidebar-models,
body:has(.studio-tools-library:not([hidden])):has(.studio-tools-backdrop:not([hidden])) #open-library,
body:has(.studio-tools-preferences:not([hidden])):has(.studio-tools-backdrop:not([hidden])) #open-preferences { color: var(--cabin-accent); background: rgb(var(--cabin-rgb) / .055); border-color: rgb(var(--cabin-rgb) / .15); }
.studio-nav-item kbd, .nav-detail { color: #90978f; font-size: 8px; }
.sidebar-section-heading { margin: 23px 9px 13px; color: #aaa99d; font-size: 10px; letter-spacing: .08em; }
.sidebar-section-heading span:last-child { color: #a09f92; font-weight: 400; }
.conversation-search { border-color: #a7aca220; border-radius: 7px; background: #050b0d66; box-shadow: inset 0 2px 5px #0005, 0 1px #dcd5b907; }
.conversation-search input { min-height: 37px; color: #d7d6cc; }
.conversation-search input::placeholder { color: #929d9d; }
.conversation-search:focus-within { border-color: rgb(var(--cabin-rgb) / .46); box-shadow: inset 0 2px 5px #0005, 0 0 0 2px rgb(var(--cabin-rgb) / .04); }
.conversation-empty { padding: 16px 10px; color: #939e9d; font-size: 11px; }
.conversation-empty > .ui-icon { width: 27px; height: 27px; padding: 5px; border: 1px solid #bfc4b91f; border-radius: 7px; color: #abb5ad; }
.conversation-item { min-height: 43px; }
.conversation-item.active { background: linear-gradient(90deg, rgb(var(--cabin-rgb) / .085), #ffffff02); border-color: rgb(var(--cabin-rgb) / .12); box-shadow: inset 2px 0 var(--cabin-accent); }
.pin-action.is-pinned { color: var(--cabin-accent); }
.sidebar-bottom { position: relative; padding-top: 18px; }
.access-panel {
  border: 1px solid #a1a4936e; border-radius: 11px; isolation: isolate;
  background: linear-gradient(128deg, #30332f, #1d2424 44%, #151d1e 78%, #242a27);
  box-shadow: inset 0 1px #e9dfc527, inset 0 -1px #0009, 0 9px 26px #0005;
}
.access-panel::before { z-index: -1; inset: 5px; width: auto; height: auto; border: 1px solid #d5cfba15; border-radius: 7px; background: none; }
.access-panel::after {
  z-index: -2; width: 220px; height: 170px; top: -25px; right: -95px; border: 0; transform: rotate(-12deg); box-shadow: none;
  background: repeating-linear-gradient(45deg, transparent 0 20px, #e8ddc208 20px 21px, #02070680 21px 22px, transparent 22px 42px), repeating-linear-gradient(-45deg, transparent 0 20px, #e8ddc208 20px 21px, #02070680 21px 22px, transparent 22px 42px);
  mask-image: linear-gradient(90deg, transparent, #000 65%);
}
.access-panel-head { padding: 19px 17px 0; font-size: 8px; letter-spacing: .14em; color: var(--cabin-accent); }
.access-state { font-size: 9px; color: #afb5ac; }
.usage-mini { padding: 25px 17px 19px; }
.usage-heading-label { color: #bdc2b8; font-size: 10px; }
.usage-mini strong { color: #eee9d9; font-size: 27px; font-weight: 300; text-shadow: 0 2px #0004; }
.usage-track { margin-top: 16px; height: 2px; background: #080f11; box-shadow: 0 1px #d5d4c511; }
.usage-track span { background: linear-gradient(90deg, #8c9690, var(--cabin-accent)); box-shadow: 0 0 8px rgb(var(--cabin-rgb) / .22); }
.usage-mini small { color: #9fa9a1; }
.access-trigger { padding: 14px 16px; min-height: 65px; background: #060d0d3d; border-top-color: #ded8bf1a; box-shadow: inset 0 1px #030908; }
.access-icon { width: 29px; height: 29px; border-radius: 50%; border: 1px solid #b6b4a84d; background: linear-gradient(135deg, #5a615a44, #0c1316); box-shadow: inset 0 1px #e5e1c826; color: #d9d5c4; }
.access-icon .ui-icon { width: 18px; height: 18px; }
.access-copy strong { color: #e1e0d5; }
.access-copy small { color: #a0a99f; }
.side-footnote { font-size: 8px; color: #8b958e; letter-spacing: .11em; }
.topbar {
  position: relative; z-index: 2; height: 66px; flex: 0 0 66px; padding: 0 31px; border-bottom-color: #cfc9b01f;
  background: linear-gradient(180deg, #1b2020, #111719 53%, #0b1114); box-shadow: 0 4px 20px #0003;
}
.topbar::after { content: ''; position: absolute; pointer-events: none; bottom: -1px; left: 2%; right: 4%; height: 1px; background: linear-gradient(90deg, rgb(var(--cabin-rgb) / .7), rgb(var(--cabin-rgb) / .18) 55%, transparent); box-shadow: 0 2px 12px rgb(var(--cabin-rgb) / .1); }
.sidebar-toggle { border: 1px solid #acb6b435; background: linear-gradient(#41484930, #070e10); box-shadow: inset 0 1px #e5e5d910, 0 2px 5px #0005; color: #babfb7; border-radius: 7px; }
.topbar-overline { letter-spacing: .16em; color: #a2aaa3; font-size: 8px; }
.topbar-title { color: #e0e1d9; font-weight: 500; }
.topbar-title::before { color: #66746e; }
.topbar-right { gap: 12px; }
.ambience-trigger { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 7px 10px; border: 1px solid #b4b7a521; border-radius: 7px; background: #b8c3b403; color: #bfc4ba; font-size: 10px; }
.ambience-orb { width: 10px; height: 10px; border: 1px solid rgb(var(--cabin-rgb) / .5); border-radius: 50%; background: radial-gradient(circle at 30% 25%, #f5eee0, var(--cabin-accent) 32%, #242d2e 78%); box-shadow: 0 0 10px rgb(var(--cabin-rgb) / .24); }
.ambience-trigger:hover { border-color: rgb(var(--cabin-rgb) / .46); color: var(--cabin-accent); }
.live-indicator { color: #a6b4ab; font-size: 9px; background: none; border: 0; padding-inline: 4px; }
.mode-dot, body[data-mode="mock"] .mode-dot { background: #c2c9b9; box-shadow: 0 0 7px #b7c9be30; }
.top-access { font-size: 10px; color: #b9c3b8; }
.access-primary { min-height: 34px; padding: 8px 12px; border-radius: 6px; border-color: #b5b5a554; background: linear-gradient(145deg, #42483c40, #1a2222); color: #e5ddc7; box-shadow: inset 0 1px #ede5c518, 0 2px 5px #0005; }
.access-primary:hover { border-color: rgb(var(--cabin-rgb) / .65); background: #333b36; }
.empty-state .hero-eyebrow { color: var(--cabin-accent); font-weight: 500; letter-spacing: .22em; }
.empty-state .hero-eyebrow::before { background: var(--cabin-accent); box-shadow: 0 0 13px rgb(var(--cabin-rgb) / .4); }
.empty-state .hero-eyebrow span { color: #b7c2c1; }
.empty-state h1 { color: #f2eee5; font-weight: 550; letter-spacing: -.055em; line-height: 1.2; }
.empty-state h1 span { background-image: linear-gradient(110deg, #a9bdc6 10%, #dfddd1 48%, var(--cabin-accent) 90%); }
.empty-state .hero-description { font-size: 14px; color: #c7ccc4; letter-spacing: .025em; }
.hero-explore { position: relative; min-height: 42px; padding: 10px 19px; color: #e9ddc3; border-color: #b3b5a05c; background: linear-gradient(145deg, #5a5a4440, #111a20d9 62%); border-radius: 7px; box-shadow: inset 0 1px #f4efd624, 0 5px 16px #0006; }
.hero-explore:hover { border-color: var(--cabin-accent); color: #fff4da; background: #283230; }
.composer {
  position: relative; isolation: isolate; border: 1px solid #a9b1aa91; border-radius: 17px; padding: 18px 22px 16px;
  background: linear-gradient(125deg, #303b3bdc, #1a2429ee 45%, #101a20f2);
  box-shadow: inset 0 1px #fff2, inset 0 -1px #000b, 0 18px 55px #0008, 0 1px 0 2px #080d10;
  backdrop-filter: blur(24px);
}
.composer::before { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: 4px; border: 1px solid #e2e4d611; border-radius: 12px; background: url('/cabin-grain-v15.svg'); background-size: 180px; opacity: .075; }
.composer::after { content: ''; pointer-events: none; position: absolute; top: -1px; left: 7%; right: 7%; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--cabin-rgb) / .85), transparent); box-shadow: 0 2px 12px rgb(var(--cabin-rgb) / .22); }
.composer:focus-within { border-color: rgb(var(--cabin-rgb) / .72); box-shadow: inset 0 1px #fff2, 0 0 0 2px rgb(var(--cabin-rgb) / .08), 0 18px 55px #0008; }
.composer-head { display: flex; align-items: center; justify-content: space-between; margin: 0 3px 17px; font-size: 9px; letter-spacing: .1em; color: #b7b7aa; }
.composer-space { display: inline-flex; align-items: center; gap: 8px; color: var(--cabin-accent); }
.composer-space i { width: 4px; height: 4px; border-radius: 50%; background: var(--cabin-accent); box-shadow: 0 0 8px rgb(var(--cabin-rgb) / .4); }
.composer-shortcut { font-size: 9px; letter-spacing: .02em; color: #98a5a2; }
.composer textarea { min-height: 60px; color: #f0eee4; font-size: 15px; line-height: 1.8; padding: 0 3px; }
.composer textarea::placeholder { color: #b0bcb7; }
.composer-controls { padding-top: 14px; border-top: 1px solid #c8ccbd21; box-shadow: 0 -1px #07111544; }
.composer-left { gap: 8px; }
.attach-button { border-color: transparent; color: #b9c2b9; background: transparent; }
.model-picker { min-height: 34px; border: 1px solid #a3ada550; padding: 7px 11px; border-radius: 7px; color: #e3e4d9; background: linear-gradient(140deg, #5c655530, #0e181c7a); box-shadow: inset 0 1px #dce4d111, 0 2px 4px #0003; }
.model-picker-icon { color: var(--cabin-accent); }
.mode-picker, .mode-picker select { color: #c2ccc0; }
.model-cost, .char-count { color: #99aaa3; }
.send-button { position: relative; width: 37px; height: 37px; border-radius: 50%; border: 1px solid #d8d4be87; background: linear-gradient(135deg, #ede4d1, #a6a993 76%); color: #313b32; box-shadow: inset 0 1px #fff9, 0 3px 6px #0006; }
.send-button:not(:disabled):hover { background: #ece6d5; box-shadow: inset 0 1px #fff, 0 0 13px rgb(var(--cabin-rgb) / .2); }
.send-button:disabled { background: linear-gradient(135deg, #727f7f55, #354649); border-color: #99aba35c; color: #a7bbb5; box-shadow: inset 0 1px #c1d5d01c; opacity: .8; }
.quick-actions { gap: 9px; margin-top: 20px; }
.quick-actions button { min-height: 37px; padding: 8px 12px; border-radius: 7px; border-color: #b5bfaf2b; color: #c3cec3; background: linear-gradient(140deg, #28302b88, #111b20a8); box-shadow: inset 0 1px #f1eaca0c, 0 3px 6px #0004; }
.quick-actions button .ui-icon { color: var(--cabin-accent); }
.quick-actions button:hover { transform: translateY(-1px); border-color: rgb(var(--cabin-rgb) / .55); color: #ebeadd; background: #2c3632; }
.composer-note { color: #9caba7; font-size: 10px; }
.chat-surface:has(.empty-state[hidden]) { background: radial-gradient(ellipse at 65% 15%, rgb(var(--cabin-rgb) / .035), transparent 65%), #0b1115; }
.chat-surface:has(.empty-state[hidden]) .composer-dock { background: linear-gradient(0deg, #0b1115 65%, transparent); }
.messages { max-width: 850px; }
.messages::before { color: var(--cabin-muted); letter-spacing: .2em; border-color: rgb(var(--cabin-rgb) / .2); }
.message-bubble { color: #e7e9e0; background: linear-gradient(130deg, #303c3e, #1d2a30); border: 1px solid #aebcad26; border-radius: 15px 15px 4px 15px; box-shadow: inset 0 1px #ced8ca0c; }
.assistant-icon { border-radius: 50%; border: 1px solid #b9b79e6e; color: var(--cabin-accent); background: linear-gradient(145deg, #4a534c70, #111c20); box-shadow: inset 0 1px #ecdebe26; }
.assistant-content { color: #dce2db; line-height: 1.9; }
.assistant-label { color: var(--cabin-accent); font-size: 11px; font-weight: 500; }
.user-label, .message-copy { color: #a2b4ab; }
.message-copy:hover { color: var(--cabin-accent); border-color: rgb(var(--cabin-rgb) / .4); }
:is(button, input, textarea, select):focus-visible { outline-color: var(--cabin-accent); }
@media (prefers-reduced-motion: no-preference) {
  .studio-nav-item, .studio-nav-item > .ui-icon, .conversation-search, .composer, .access-trigger, .ambience-trigger, .top-access, .send-button { transition: border-color .28s, box-shadow .28s, background-color .28s, color .28s, transform .15s; }
  body[data-busy="true"] .composer-space i { animation: cabin-thinking 1.8s ease-in-out infinite; }
  @keyframes cabin-thinking { 50% { opacity: .3; box-shadow: 0 0 2px rgb(var(--cabin-rgb) / .2); } }
}
@media (min-width: 761px) {
  body.sidebar-collapsed .sidebar { padding-inline: 13px; }
  body.sidebar-collapsed .sidebar-top { padding-inline: 2px; }
  body.sidebar-collapsed .identity-mark { width: 45px; }
  body.sidebar-collapsed .studio-nav-item { padding: 5px; }
  body.sidebar-collapsed .studio-nav::after { left: 5px; right: 5px; }
}
@media (max-width: 1050px) and (min-width: 761px) { .app-shell { grid-template-columns: 260px minmax(0, 1fr); } .sidebar { padding-inline: 15px; } .topbar { padding-inline: 20px; } .live-indicator { display: none; } .composer-left { gap: 4px; } .model-cost, .char-count { display: none; } }
@media (max-width: 760px) {
  .sidebar { padding: 25px 18px 16px; background: radial-gradient(ellipse at 0 0, #38352e3b, transparent 48%), linear-gradient(105deg, #1d1e1f, #0d1113); }
  .sidebar-top { padding-bottom: 21px; }
  .new-chat { margin-bottom: 6px; min-height: 54px; }
  .studio-nav { padding: 10px 0 19px; gap: 4px; }
  .studio-nav-item { min-height: 46px; }
  .sidebar-section-heading { margin-top: 20px; }
  .conversation-list { flex: 1 0 72px; }
  .sidebar-bottom { padding-top: 12px; }
  .usage-mini { padding-top: 20px; padding-bottom: 13px; }
  .access-panel-head { padding-top: 16px; }
  .access-trigger { min-height: 59px; padding-block: 10px; }
  .topbar { height: 60px; flex-basis: 60px; padding-inline: 15px; }
  .topbar-right { gap: 6px; }
  .ambience-trigger { min-height: 32px; padding: 6px 8px; gap: 6px; font-size: 9px; }
  .topbar #export-chat { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 32px; margin: 0; padding: 0; font-size: 0; }
  .topbar #export-chat::before { content: '↓'; font-size: 17px; }
  .access-primary { margin-left: 0; font-size: 10px; min-height: 32px; padding-inline: 9px; }
  .empty-state .hero-description { font-size: 12px; letter-spacing: .01em; }
  .empty-state .hero-eyebrow { font-size: 9px; letter-spacing: .13em; }
  .composer { padding: 15px 13px 12px; border-radius: 14px; }
  .composer-head { margin-bottom: 12px; font-size: 8px; }
  .composer-shortcut { display: none; }
  .composer textarea { min-height: 56px; font-size: 14px; }
  .composer-controls { padding-top: 11px; }
  .composer-left { gap: 2px; }
  .model-picker { padding: 6px; min-height: 31px; }
  .send-button { width: 33px; height: 33px; }
  .quick-actions { gap: 7px; margin-top: 17px; }
  .quick-actions button { min-height: 35px; padding: 7px 10px; }
  .composer-note { font-size: 9px; }
}
@media (max-height: 800px) and (min-width: 761px) {
  .sidebar { padding-top: 19px; padding-bottom: 12px; overflow-y: auto; }
  .sidebar-top { padding-bottom: 17px; }
  .new-chat { min-height: 51px; margin-bottom: 4px; }
  .studio-nav { padding: 9px 0 14px; gap: 2px; }
  .studio-nav-item { min-height: 43px; }
  .sidebar-section-heading { margin-top: 16px; margin-bottom: 10px; }
  .conversation-empty { flex-direction: row; align-items: center; padding: 10px 7px; gap: 9px; }
  .conversation-empty > .ui-icon { flex-shrink: 0; }
  .sidebar-bottom { padding-top: 10px; }
  .access-panel-head { padding-top: 14px; }
  .usage-mini { padding-top: 17px; padding-bottom: 11px; }
  .access-trigger { min-height: 55px; padding-block: 10px; }
  .side-footnote { margin-top: 12px; }
  .chat-surface:has(.empty-state:not([hidden])) .empty-state { padding-top: 22px; padding-bottom: 23px; }
  .empty-state h1 { font-size: 52px; }
  .empty-state .hero-eyebrow { margin-bottom: 17px; }
  .hero-actions { margin-top: 18px; }
  .composer-head { margin-bottom: 12px; }
  .composer textarea { min-height: 50px; }
}