.refresh-models {
  display: inline;
  border: 0;
  background: transparent;
  color: #718079;
  cursor: pointer;
  padding: 2px 5px;
}
.refresh-models:hover { color: var(--green); }
select optgroup { background: #131a17; }
.header-action {
  margin-left: auto;
  border: 1px solid #334139;
  border-radius: 8px;
  background: transparent;
  color: #9cb1a6;
  padding: 7px 10px;
  cursor: pointer;
  font-size: .7rem;
}
.privacy-pill { margin-left: 0; }
dialog {
  width: min(570px, calc(100% - 32px));
  border: 1px solid #33413c;
  border-radius: 16px;
  padding: 0;
  color: var(--text);
  background: #111715;
  box-shadow: 0 25px 90px #000c;
}
dialog::backdrop { background: #050806c9; backdrop-filter: blur(3px); }
.dialog-card { padding: 26px; }
.dialog-heading { display: flex; justify-content: space-between; align-items: start; margin-bottom: 20px; }
.dialog-heading h3 { font-family: Georgia, serif; font-size: 1.55rem; font-weight: 400; margin: 0; }
.dialog-heading button { border: 0; background: transparent; color: #8d9b95; font-size: 1.4rem; cursor: pointer; }
.dialog-card label { display: block; color: #b6c1bc; font-size: .8rem; margin-top: 15px; }
.dialog-card input { width: 100%; margin-top: 7px; padding: 12px; border: 1px solid #34413c; border-radius: 8px; background: #0d1210; color: var(--text); }
.dialog-note { font-size: .72rem; }
.scrub-entities { max-height: 420px; overflow: auto; display: grid; gap: 8px; }
.scrub-row { border: 1px solid var(--line); border-radius: 9px; padding: 11px; background: #0d1210; }
.scrub-row code { color: var(--green2); }
.scrub-value { margin-top: 5px; overflow-wrap: anywhere; color: #c7d1cc; }
.blocked-review { border-color: #635a35; color: #e8d987; }
html, body { overflow: hidden; }
.workspace { height: 100dvh; overflow: hidden; }
.sidebar { height: 100dvh; overflow: hidden; }
.chat-panel { height: 100dvh; min-height: 0; overflow: hidden; }
.messages { min-height: 0; overscroll-behavior: contain; scrollbar-gutter: stable; scroll-padding-top: 10px; }
.text-segment { white-space: pre-wrap; }
.code-block {
  margin: 14px 0;
  overflow: visible;
  border: 1px solid #303b37;
  border-radius: 11px;
  background: #080c0b;
  box-shadow: 0 8px 25px #0003;
}
.code-header {
  position: sticky;
  top: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #29332f;
  background: #151d1a;
  color: #86958e;
  font-size: .68rem;
  text-transform: lowercase;
  border-radius: 10px 10px 0 0;
}
.copy-code {
  border: 0;
  background: transparent;
  color: #b5c4bc;
  cursor: pointer;
  font-size: .7rem;
}
.copy-code:hover { color: var(--green); }
.code-block pre {
  margin: 0;
  padding: 17px;
  overflow: auto;
  color: #dce8e1;
  font: .82rem/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  tab-size: 2;
  border-radius: 0 0 10px 10px;
}
.code-block code { white-space: pre; }
.message { max-width: 100%; }
.message-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.message-heading .role { margin-bottom: 0; }
.message.user { width: fit-content; max-width: min(78%, 680px); margin-left: auto; }
.message.user .message-heading { justify-content: flex-end; }
.message.user .content {
  padding: 12px 16px;
  border: 1px solid #3d5549;
  border-radius: 17px 17px 4px 17px;
  background: #1b2b24;
  color: #f0f6f2;
  box-shadow: 0 5px 18px #0002;
}
.message.user .content.collapsed {
  max-height: 260px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 78%, transparent 100%);
}
.user-actions {
  position: sticky;
  top: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  margin: 0 0 6px;
  padding: 4px 8px;
  border: 1px solid #33443c;
  border-radius: 10px;
  background: #121a17f2;
  box-shadow: 0 5px 16px #0005;
  backdrop-filter: blur(8px);
}
.user-actions span { flex: 1; }
.user-actions button {
  border: 0;
  padding: 5px;
  background: transparent;
  color: #7f9088;
  cursor: pointer;
  font-size: .68rem;
}
.user-actions button:hover { color: var(--green); }
.edit-message {
  border: 0;
  padding: 3px 5px;
  background: transparent;
  color: #7f9088;
  cursor: pointer;
  font-size: .68rem;
}
.edit-message:hover { color: var(--green); }
.edit-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto 7px;
  padding: 0 5px;
  color: #a8b8b0;
  font-size: .72rem;
}
.edit-banner button { border: 0; background: transparent; color: var(--green); cursor: pointer; }
.composer.editing { border-color: #648a57; box-shadow: 0 0 0 2px #9be37d12; }
#conversation-list > .section-label { margin-top: 24px; flex: 0 0 auto; }
.conversation > button:first-child { padding-right: 59px; }
.conversation .keep {
  position: absolute;
  right: 27px;
  top: 5px;
  border: 0;
  padding: 5px;
  background: transparent;
  color: #6f7e77;
  cursor: pointer;
}
.conversation .keep:hover, .conversation.kept .keep { color: var(--green); }
.conversation.kept > button:first-child { color: #dce9e1; }
.conversation.kept > button:first-child::before { content: ''; }
@media(max-width:760px) {
  .code-block { margin-left: -4px; margin-right: -4px; }
  .code-block pre { font-size: .76rem; }
  .message.user { max-width: 88%; }
  .user-actions { top: 6px; gap: 5px; }
  .user-actions button { min-height: 36px; padding: 7px; }
  .conversation .keep { display: block; min-width: 38px; min-height: 38px; top: 3px; }
}

.sidebar-backdrop { display: none; }

@media (max-width: 760px) {
  html, body { width: 100%; height: 100%; overscroll-behavior: none; }
  body { -webkit-text-size-adjust: 100%; }
  .workspace { width: 100%; height: 100dvh; }
  .chat-panel {
    width: 100%;
    height: 100dvh;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .chat-panel > header {
    min-height: calc(58px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 12px 0;
    gap: 9px;
  }
  .menu {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 10px;
  }
  header > div:nth-child(2) { min-width: 0; flex: 1; }
  header > div:nth-child(2) .eyebrow { display: none; }
  #model-select {
    display: inline-block;
    width: calc(100% - 32px);
    min-width: 0;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .82rem;
  }
  #refresh-models { width: 28px; height: 40px; padding: 0; }
  .header-action {
    width: 42px;
    height: 42px;
    padding: 0;
    overflow: hidden;
    color: transparent;
    font-size: 0;
  }
  .header-action::after { content: '◈'; color: #9cb1a6; font-size: 1.1rem; }
  .privacy-pill { display: none; }
  .sidebar {
    width: min(86vw, 320px);
    height: 100dvh;
    padding: calc(16px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom));
    z-index: 20;
  }
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 19;
    border: 0;
    padding: 0;
    background: #0009;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s;
  }
  .sidebar-backdrop.open { opacity: 1; visibility: visible; }
  .new-chat, .conversation > button:first-child { min-height: 44px; }
  .delete { display: block; min-width: 38px; min-height: 38px; top: 3px; }
  .sidebar-footer button { min-width: 44px; min-height: 44px; }
  .messages {
    width: 100%;
    padding: 24px 14px 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: auto;
  }
  .message { margin-bottom: 25px; }
  .message .content { font-size: .95rem; line-height: 1.6; }
  .composer-wrap {
    width: 100%;
    padding: 10px 10px calc(8px + env(safe-area-inset-bottom));
  }
  .composer { padding: 11px 11px 8px; border-radius: 16px; }
  .composer textarea { min-height: 24px; max-height: 34dvh; font-size: 16px; }
  .composer-bar { margin-top: 7px; }
  .composer-bar span {
    max-width: calc(100% - 52px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .composer-bar button { width: 40px; height: 40px; }
  .fine-print { display: none; }
  .empty-state {
    width: calc(100% - 28px);
    margin-top: 0;
    padding-bottom: 8px;
  }
  .empty-state .orb { width: 56px; height: 56px; margin-bottom: 18px; }
  .empty-state .orb span { width: 18px; height: 18px; }
  .empty-state h2 { font-size: clamp(1.75rem, 9vw, 2.1rem); }
  .empty-state > p:not(.eyebrow) { font-size: .88rem; line-height: 1.5; }
  .prompts { margin-top: 22px; gap: 8px; }
  .prompts button { min-height: 46px; padding: 11px 13px; }
  .code-block { max-width: calc(100vw - 20px); }
  .code-block pre { padding: 13px; font-size: .72rem; -webkit-overflow-scrolling: touch; }
  dialog {
    width: calc(100% - 20px);
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px);
    overflow: auto;
  }
  .dialog-card { padding: 20px 16px; }
  .dialog-heading button { min-width: 44px; min-height: 44px; }
  .dialog-card input { min-height: 46px; font-size: 16px; }
}

@media (max-width: 380px), (max-height: 650px) and (max-width: 760px) {
  .empty-state .orb, .empty-state .eyebrow { display: none; }
  .empty-state h2 { margin-bottom: 8px; }
  .prompts { margin-top: 14px; }
}