/* Brand v3.0 fonts (docs/brand), self-hosted under the SIL Open Font License (fonts/OFL-*.txt):
   Source Sans 3 for text and Poppins for the logo and headings, Latin and Latin Extended subsets
   from Google Fonts. */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/source-sans-3-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
/* AIONFLARE brand v3.0 (docs/brand): Poppins for the logo and headings, Source Sans 3 for text;
   Graphite Black and Honey Gold on Ivory Neutral, with neutral greys. */
:root {
  --font-display: Poppins, 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  --brand-navy: #1f1f1f;
  --brand-teal: #1f1f1f;
  --brand-gold: #d4a017;
  font-family:
    'Source Sans 3',
    Segoe UI,
    Arial,
    sans-serif;
  color: #1f1f1f;
  background: #f8f6ef;
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  display: flex;
}
button,
a,
textarea,
summary {
  outline-offset: 5px;
}
aside {
  width: 246px;
  background: #fff;
  border-right: 1px solid #e7e6e4;
  position: fixed;
  inset: 0 auto 0 0;
  padding: 34px 23px;
  display: flex;
  flex-direction: column;
}
.brand {
  display: block;
  text-decoration: none;
  color: #1f1f1f;
}
/* Brand v3.0, AIONFLARE: the primary logo cut from the brand board; the dark version (off-white
   letters, the same gold flare and star) shows in dark mode. */
.brand-logo {
  display: block;
  width: 176px;
  height: auto;
}
.brand-logo-dark,
:root[data-theme='dark'] .brand-logo-light {
  display: none;
}
:root[data-theme='dark'] .brand-logo-dark {
  display: block;
}
.brand-icon {
  display: none;
  width: 34px;
  height: 34px;
}
.brand small {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 6.2px;
  display: block;
  margin: 8px 0 0 1px;
}
body.sidebar-collapsed .brand-icon {
  display: block;
  margin: 0 auto;
}
.aside-bottom small {
  display: block;
  font-size: 11px;
  color: #827e77;
  margin-top: 6px;
  font-weight: 400;
}
.aside-bottom {
  margin-top: auto;
  font-size: 11px;
  color: #605c55;
}
.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #d4a017;
  border-radius: 50%;
  margin-right: 5px;
}
.page {
  margin-left: 246px;
  width: calc(100% - 246px);
}
main {
  max-width: 1240px;
  margin: auto;
  padding: 43px 44px 20px;
}
.intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 1.7px;
  color: #817c72;
  font-weight: 700;
  margin: 0 0 18px;
}
h1 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 46px;
  line-height: 1.13;
  letter-spacing: -1.8px;
  margin: 0;
}
h2 {
  font-size: 17px;
  font-weight: 550;
  margin: 0;
}
.subtitle {
  font-size: 13px;
  color: #85817a;
  margin: 18px 0 30px;
}
.orb {
  font-size: 115px;
  color: #8c877e;
  margin-right: 28px;
  font-weight: 300;
}
.notice {
  padding: 12px 16px;
  border: 1px solid #e3ddc4;
  background: #fbf8ed;
  border-radius: 9px;
  font-size: 12px;
  color: #7b6e42;
  margin: 0 0 24px;
}
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 20px;
}
.panel {
  background: #fff;
  border: 1px solid #e3e2df;
  border-radius: 13px;
  padding: 25px;
}
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 23px;
}
.tag {
  font-size: 10px;
  border: 1px solid #e3e2e0;
  border-radius: 20px;
  padding: 6px 9px;
  color: #757067;
  white-space: nowrap;
}
label {
  display: block;
  font-size: 11px;
  color: #817c73;
  margin-bottom: 10px;
}
textarea {
  width: 100%;
  min-height: 134px;
  padding: 14px;
  border: 1px solid #e2e1de;
  background: #fafafa;
  border-radius: 8px;
  resize: vertical;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.7;
  color: #1f1f1f;
}
textarea::placeholder {
  color: #a8a49d;
}
.prompt-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 13px;
  font-size: 10px;
  color: #9a968d;
}
button {
  font: inherit;
  cursor: pointer;
  background: #1f1f1f;
  color: #fff;
  border: 0;
  border-radius: 7px;
  padding: 11px 18px;
  font-size: 12px;
}
button:hover {
  filter: brightness(0.93);
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
.suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 23px;
}
.suggestions button,
.secondary {
  font-size: 11px;
  color: #6e6a61;
  background: #f8f6ef;
  border: 1px solid #e5e4e1;
  padding: 8px 12px;
}
#feedback {
  font-size: 12px;
  color: #7c6345;
  margin: 14px 0 0;
}
.context {
  background: #f5efe3;
}
.context h2 {
  font-family: Georgia, serif;
  font-size: 25px;
  line-height: 1.3;
  font-weight: 400;
}
.context dl {
  margin: 23px 0;
}
.context dl div {
  display: flex;
  justify-content: space-between;
  margin: 12px 0;
  font-size: 11px;
}
.context dt {
  color: #898479;
}
.context dd {
  margin: 0;
  color: #54514a;
}
.context > p:last-child {
  font-size: 11px;
  line-height: 1.8;
  color: #878278;
  border-top: 1px solid #dddcd9;
  padding-top: 16px;
}
.result {
  margin-top: 22px;
}
#answer {
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
#limitations {
  font-size: 12px;
  line-height: 1.6;
  color: #7f7a71;
}
.muted {
  font-size: 11px;
  color: #938f86;
  overflow-wrap: anywhere;
}
details {
  border-top: 1px solid #e8e7e6;
  padding-top: 16px;
  font-size: 12px;
}
summary {
  cursor: pointer;
}
#events {
  line-height: 2;
  color: #78736a;
}
.history-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin: 34px 0 17px;
}
.history-heading .eyebrow {
  margin-bottom: 10px;
}
#runs {
  padding: 0;
  overflow: hidden;
}
.empty {
  padding: 23px;
  color: #928d84;
  font-size: 12px;
}
.run-row {
  display: flex;
  width: 100%;
  border-radius: 0;
  text-align: left;
  align-items: center;
  gap: 15px;
  background: #fff;
  color: #4d4a44;
  border-bottom: 1px solid #edecea;
  padding: 17px 23px;
}
.run-row:last-child {
  border-bottom: 0;
}
.run-icon {
  background: #f6f2e8;
  border-radius: 9px;
  padding: 9px;
}
.run-info {
  flex: 1;
  min-width: 0;
}
.run-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 650px;
  font-size: 12px;
}
footer {
  display: flex;
  justify-content: space-between;
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid #e2e1de;
  font-size: 11px;
  letter-spacing: 1px;
  color: #959087;
}
footer span {
  letter-spacing: 0;
  font-size: 10px;
}
[hidden] {
  display: none !important;
}
@media (max-width: 1000px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .context {
    display: none;
  }
  aside {
    width: 200px;
  }
  .page {
    margin-left: 200px;
    width: calc(100% - 200px);
  }
  main {
    padding: 30px;
  }
  h1 {
    font-size: 39px;
  }
}
@media (max-width: 650px) {
  aside {
    position: static;
    width: 100%;
    padding: 18px;
  }
  nav,
  .aside-bottom,
  .brand small {
    display: none;
  }
  body {
    display: block;
  }
  .page {
    margin: 0;
    width: 100%;
  }
  main {
    padding: 25px 18px;
  }
  .orb {
    display: none;
  }
  h1 {
    font-size: 35px;
  }
  .panel {
    padding: 20px;
  }
  .section-title {
    flex-wrap: wrap;
  }
  .run-row {
    padding: 14px;
    gap: 9px;
  }
  .run-row .tag {
    font-size: 9px;
  }
  footer span {
    max-width: 200px;
    text-align: right;
  }
}

/* Persistent history and account sidebar. */
aside {
  width: 280px;
  padding: 28px 16px 16px;
  height: 100dvh;
}
.page {
  margin-left: 280px;
  width: calc(100% - 280px);
}
.brand {
  margin-left: 10px;
}
aside > nav {
  margin: 28px 0 12px;
}
aside > .brand,
aside > nav {
  flex-shrink: 0;
}
#history {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 22px;
}
.history-heading {
  margin: 0 8px 12px;
  align-items: center;
  gap: 8px;
}
.history-heading .eyebrow {
  display: none;
}
.history-heading h2 {
  font-size: 12px;
  color: #817c73;
}
#runs {
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  padding: 0 3px;
}
#runs .empty {
  padding: 8px;
  line-height: 1.6;
}
.run-row {
  border: 0;
  border-radius: 8px;
  padding: 8px 9px;
  gap: 0;
  margin-bottom: 1px;
  background: transparent;
}
.run-row:hover,
.run-row[aria-current='true'] {
  background: #f4efe4;
  filter: none;
}
.run-icon,
.run-row .tag {
  display: none;
}
.run-title {
  font-size: 12px;
}
.sidebar-account {
  flex-shrink: 0;
  border-top: 1px solid #e7e6e4;
  margin-top: 16px;
  padding: 16px 9px 8px;
}
.sidebar-account h2 {
  font-size: 13px;
}
#account-status {
  font-size: 11px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  color: #7c7871;
  margin: 8px 0 12px;
}
.sidebar-account button {
  font-size: 11px;
  padding: 9px 12px;
}
#sign-out {
  background: #f4efe4;
  color: #1f1f1f;
}
.aside-bottom {
  margin-top: 10px;
  padding: 0 9px;
  flex-shrink: 0;
  font-size: 10px;
}
@media (max-width: 650px) {
  aside {
    position: static;
    width: 100%;
    height: auto;
    max-height: none;
    padding: 18px;
  }
  .page {
    margin-left: 0;
    width: 100%;
  }
  #history {
    flex: none;
    margin-top: 20px;
  }
  #runs {
    max-height: 180px;
  }
  .sidebar-account {
    margin-top: 12px;
  }
}

/* Conversation canvas with an anchored composer. */
.page {
  height: 100dvh;
  display: flex;
  flex-direction: column;
}
main {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 32px;
  max-width: 1000px;
}
#conversation {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 12px;
  scrollbar-width: thin;
}
#response-feed {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.response-card {
  padding: 16px 0 24px;
  border-bottom: 1px solid #e7e6e4;
}
.response-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.8;
}
.ready {
  text-align: center;
  font-family: var(--font-display);
  font-size: 25px;
  letter-spacing: -0.5px;
  margin: 24px 0 32px;
}
.has-runs .ready {
  display: none;
}
.layout {
  display: block;
  flex-shrink: 0;
  margin-top: 16px;
}
.composer {
  padding: 14px 18px;
  border-radius: 26px;
  box-shadow: 0 4px 24px #2d2b2708;
}
.composer .section-title,
.composer label {
  display: none;
}
textarea {
  min-height: 52px;
  max-height: 150px;
  border: 0;
  background: transparent;
  padding: 9px 4px;
}
.prompt-footer {
  margin-top: 0;
}
.suggestions {
  margin-top: 10px;
}
.suggestions button {
  border: 0;
  background: transparent;
  padding: 5px 0;
  margin-right: 14px;
}
.notice {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  text-align: center;
  font-size: 10px;
  margin: 10px 0 0;
  padding: 0;
}
#result {
  margin-bottom: 18px;
}
@media (max-width: 650px) {
  .page {
    height: 100dvh;
  }
  main {
    padding: 16px;
  }
  #conversation {
    padding: 0 4px;
  }
}

/* Inline send control and response utilities. */
#prompt-form {
  position: relative;
}
#prompt {
  padding-right: 56px;
  min-height: 80px;
  resize: none;
}
#submit {
  position: absolute;
  right: 4px;
  top: 24px;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  font-size: 25px;
  line-height: 1;
}
.response-card {
  position: relative;
  border: 1px solid #e3e2df;
  border-radius: 16px;
  background: #fff;
  padding: 20px;
}
.inline-execution {
  border-top: 1px solid #edecea;
  padding-top: 12px;
  margin-top: 18px;
}
.inline-execution h3 {
  font-size: 11px;
  font-weight: 600;
  color: #7c7871;
  margin: 0;
}
.execution-events {
  font-size: 10px;
  line-height: 1.8;
  color: #898479;
  padding-left: 18px;
}

#scroll-bottom {
  align-self: center;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: -42px 0 6px;
  z-index: 1;
  border: 1px solid #e3e2df;
  border-radius: 50%;
  background: #fff;
  color: #43413c;
  cursor: pointer;
  box-shadow:
    0 4px 14px rgba(32, 52, 47, 0.16),
    0 1px 3px rgba(32, 52, 47, 0.1);
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease,
    color 0.15s ease;
}
#scroll-bottom[hidden] {
  display: none;
}
#scroll-bottom:hover {
  color: #24221f;
  transform: translateY(-1px);
  box-shadow:
    0 6px 18px rgba(32, 52, 47, 0.2),
    0 2px 4px rgba(32, 52, 47, 0.12);
}
#scroll-bottom:focus-visible {
  outline: 2px solid #837e75;
  outline-offset: 2px;
}
:root[data-theme='dark'] #scroll-bottom {
  color: #dedcd9;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.45),
    0 1px 3px rgba(0, 0, 0, 0.35);
}

#new-chat {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  color: #1f1f1f;
  padding: 13px;
  font-size: 13px;
  margin: 6px 0;
}
#new-chat:hover {
  background: #f4efe4;
}
@media (max-width: 650px) {
  aside nav {
    display: block;
  }
}

.user-message {
  background: #f6f1e6;
  border: 1px solid #e8dcc2;
  border-radius: 14px;
  padding: 14px 16px;
  margin: 24px 0 20px;
  color: #1f1f1f;
}
.user-label {
  font-size: 11px;
  font-weight: 600;
}
.user-message p {
  margin: 7px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.6;
}

.user-message img {
  display: block;
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
  margin-top: 12px;
  border-radius: 10px;
}
#attachment-image {
  max-width: 100px;
  max-height: 90px;
  border-radius: 8px;
}
#attach-image {
  background: transparent;
  color: #1f1f1f;
  padding: 4px 8px;
  font-size: 22px;
}
#attachment-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

/* ChatGPT-style composer: one rounded box with embedded attach and send controls. */
.composer {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}
#prompt-form {
  background: #fff;
  border: 1px solid #e3e2df;
  border-radius: 28px;
  padding: 8px 10px;
  box-shadow: 0 4px 24px #2d2b270d;
}
/* Files dragged over the prompt box: it shows where they will drop. */
#prompt-form.drop-target,
:root[data-theme='dark'] #prompt-form.drop-target {
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 3px #d4a01733;
}
#attachment-preview {
  padding: 6px 6px 0;
}
.prompt-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
#prompt {
  flex: 1;
  min-height: 0;
  height: 40px;
  max-height: 200px;
  padding: 9px 4px;
  overflow-y: auto;
  outline: none;
  box-shadow: none;
}
#prompt:focus,
#prompt:focus-visible {
  outline: none;
  border: 0;
  box-shadow: none;
}
#attach-image,
#submit {
  position: static;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-bottom: 2px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#attach-image:hover:not(:disabled) {
  background: #f4efe4;
}
#submit {
  font-size: 20px;
}
#submit:disabled {
  background: #ceccc7;
  cursor: default;
}
.composer .prompt-footer {
  justify-content: flex-end;
  padding: 6px 14px 0;
}

/* Progress indicator shown under the user's prompt while a run is in flight. */
.progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 13px;
  color: #757067;
}
.progress-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d4a017;
  animation: progress-pulse 1.2s ease-in-out infinite;
}
.progress-label {
  background: linear-gradient(90deg, #757067 30%, #c9c7c2 50%, #757067 70%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: progress-shimmer 1.8s linear infinite;
}
@keyframes progress-pulse {
  50% {
    transform: scale(0.6);
    opacity: 0.5;
  }
}
@keyframes progress-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .progress-dot,
  .progress-label {
    animation: none;
  }
  .progress-label {
    color: #757067;
  }
}

/* Chat turn: the user's prompt sits right-aligned outside the result container. */
.run-entry {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* The turn just sent fills a screen, so its prompt sits at the top with room for the answer. */
.run-entry.latest-turn {
  min-height: var(--turn-room, 0px);
}
.user-turn {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px;
  padding-left: 15%;
}
.user-column {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 0;
}
.user-meta {
  display: flex;
  gap: 8px;
  margin: 2px 4px 6px;
  font-size: 11px;
  color: #8e897f;
}
.user-meta .user-label {
  color: #1f1f1f;
}
.user-turn .user-message {
  margin: 0;
  border-radius: 18px 4px 18px 18px;
  max-width: 100%;
}
.user-turn .user-message p {
  margin: 0;
}
.user-avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1f1f1f;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.pending-entry .progress {
  padding: 4px 4px 8px;
}
@media (max-width: 650px) {
  .user-turn {
    padding-left: 8%;
  }
}

/* Pastel light-gray scrollbars for the sidebar history and the conversation. */
:root {
  --scrollbar-thumb: #dcdbd8;
  --scrollbar-thumb-hover: #cccac5;
}
.sidebar-scroll,
#conversation {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
.sidebar-scroll::-webkit-scrollbar,
#conversation::-webkit-scrollbar {
  width: 10px;
}
.sidebar-scroll::-webkit-scrollbar-track,
#conversation::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-scroll::-webkit-scrollbar-thumb,
#conversation::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 3px solid transparent;
  border-radius: 10px;
  background-clip: padding-box;
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover,
#conversation::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

/* Sidebar: brand and New chat stay fixed; the other menu items and Recent runs scroll beneath them. */
.sidebar-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}
#history {
  margin-top: 14px;
  flex: none;
  display: block;
}
#runs {
  overflow: visible;
  min-height: auto;
}
.history-heading {
  display: flex;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0 0 6px;
  padding: 4px 0;
  background: #fff;
}
#toggle-runs {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: #817c73;
  padding: 6px 8px;
  border-radius: 7px;
}
#toggle-runs:hover,
#history-new-chat:hover {
  background: #f4efe4;
}
#toggle-runs .chevron {
  transition: transform 0.15s ease;
}
#toggle-runs[aria-expanded='false'] .chevron {
  transform: rotate(-90deg);
}
#history-new-chat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  color: #1f1f1f;
  border-radius: 7px;
}
#history-new-chat:disabled {
  opacity: 0.5;
  cursor: default;
}

/* The conversation spans the page so its scrollbar sits on the browser's right edge;
   content and composer stay in a centered column. */
main {
  max-width: none;
  padding: 20px 0;
}
#conversation {
  padding: 0 max(32px, calc((100% - 936px) / 2));
}
.ready,
.layout,
.notice {
  width: min(936px, calc(100% - 64px));
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 650px) {
  main {
    padding: 16px 0;
  }
  #conversation {
    padding: 0 16px;
  }
  .ready,
  .layout,
  .notice {
    width: calc(100% - 32px);
  }
}

/* Action icons beneath each response. */
.response-actions {
  display: flex;
  gap: 2px;
  margin: 12px -6px -8px;
}
.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  color: #76726a;
}
.action-button:hover:not(:disabled),
.action-button.active {
  background: #f4efe4;
  color: #1f1f1f;
}
.action-button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Models view: replaces the conversation and composer while open. */
#open-models {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  color: #1f1f1f;
  padding: 13px;
  font-size: 13px;
  margin: 0 0 6px;
}
#open-models:hover,
#open-models[aria-pressed='true'] {
  background: #f4efe4;
}
.showing-models #conversation,
.showing-models #scroll-bottom,
.showing-models .ready,
.showing-models .layout {
  display: none;
}
#models-view {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px max(32px, calc((100% - 936px) / 2)) 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
.models-header {
  margin-bottom: 18px;
}
.models-header h1 {
  font-family: inherit;
  font-size: 25px;
  letter-spacing: -0.5px;
}
#models-note {
  font-size: 12px;
  line-height: 1.6;
  margin: 8px 0 0;
  max-width: 640px;
}
.models-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border: 1px solid #e3e2df;
  border-radius: 24px;
  background: #fff;
  color: #949089;
  font-size: inherit;
  margin: 0;
}
.models-search:focus-within {
  border-color: #cfcdc8;
}
#models-search {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: #1f1f1f;
}
#models-summary {
  font-size: 11px;
  margin: 14px 2px 10px;
}
.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.models-empty {
  grid-column: 1 / -1;
  padding: 32px 0;
  text-align: center;
  font-size: 13px;
  color: #85817a;
}
.model-card {
  border: 1px solid #e3e2df;
  border-radius: 12px;
  background: #fff;
  padding: 14px;
}

/* Sidebar while Models is open: chat navigation gives way to publisher and capability filters. */
.models-open aside > nav,
.models-open .sidebar-scroll {
  display: none;
}
#models-filters {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-top: 22px;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
.filters-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  background: transparent;
  color: #1f1f1f;
  font-size: 13px;
  text-align: left;
}
.filters-link:hover:not(:disabled) {
  background: #f4efe4;
}
.filters-link:disabled {
  color: #a8a49d;
  cursor: default;
}
.filter-group {
  margin-top: 18px;
}
.filter-group h2 {
  margin: 0 10px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #949089;
}
.filter-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 2px;
  background: transparent;
  color: #1f1f1f;
  font-size: 13px;
  text-align: left;
}
.filter-item:hover {
  background: #f4f4f3;
}
.filter-item[aria-pressed='true'] {
  background: #f4efe4;
  color: #1f1f1f;
  font-weight: 600;
}
.filter-count {
  font-size: 11px;
  font-weight: 400;
  color: #949089;
}
.model-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.model-name {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.model-name strong {
  font-size: 13px;
  font-weight: 600;
}
.model-name .muted {
  font-size: 11px;
}
.model-status {
  flex-shrink: 0;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 10px;
  background: #f2f1f0;
  color: #85817a;
  white-space: nowrap;
}
.model-status.available {
  background: #f1eada;
  color: #1f1f1f;
  font-weight: 600;
}
.model-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 12px;
}
.model-tag {
  font-size: 10px;
  padding: 3px 8px;
  border: 1px solid #e3e2e0;
  border-radius: 10px;
  color: #757067;
}
@media (max-width: 650px) {
  #models-view {
    padding: 8px 16px 24px;
  }
}

/* Soft edges: messages fade out under the header and above the composer instead of being cut
   off, and only on an edge with more content beyond it. The scrollbar strip is left unmasked. */
@property --fade-top {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --fade-bottom {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
#conversation {
  --scrollbar-strip: 12px;
  scroll-behavior: smooth;
  padding-top: 8px;
  padding-bottom: 16px;
  mask:
    linear-gradient(
        to bottom,
        transparent,
        #000 var(--fade-top),
        #000 calc(100% - var(--fade-bottom)),
        transparent
      )
      left / calc(100% - var(--scrollbar-strip)) 100% no-repeat,
    linear-gradient(#000, #000) right / var(--scrollbar-strip) 100% no-repeat;
  transition:
    --fade-top 0.2s ease,
    --fade-bottom 0.2s ease;
}
#conversation.fade-top {
  --fade-top: 36px;
}
#conversation.fade-bottom {
  --fade-bottom: 36px;
}
@media (prefers-reduced-motion: reduce) {
  #conversation {
    scroll-behavior: auto;
    transition: none;
  }
}

/* Pricing expiry warning above the composer (ADR-0009). */
#pricing-notice {
  flex-shrink: 0;
  width: min(936px, calc(100% - 64px));
  margin: 8px auto 0;
  padding: 10px 14px;
  border: 1px solid #ecdcae;
  border-radius: 10px;
  background: #fbf6e6;
  color: #7b6420;
  font-size: 12px;
  line-height: 1.5;
}
#pricing-notice.expired {
  border-color: #efc9c1;
  background: #fbefec;
  color: #8a3b2c;
}
.showing-models #pricing-notice {
  display: none;
}
@media (max-width: 650px) {
  #pricing-notice {
    width: calc(100% - 32px);
  }
}

/* Attached image thumbnail with a small remove (X) control on its corner. */
.attachment-thumb {
  position: relative;
  display: inline-block;
}
#attachment-image {
  display: block;
  max-width: 96px;
  max-height: 96px;
  border: 1px solid #e3e2df;
  border-radius: 12px;
}
#remove-image {
  position: absolute;
  top: -7px;
  right: -7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #383631;
  color: #fff;
  box-shadow: 0 1px 4px #2d2b2733;
}
#remove-image:hover:not(:disabled) {
  background: #000;
}
#remove-image:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Top toolbar: Customize, hide header, and the light/dark switch. */
.toolbar {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 52px;
  padding: 0 20px;
}
.toolbar[hidden] {
  display: none;
}
.toolbar-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.toolbar-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  background: transparent;
  color: #57544e;
  font-size: 13px;
  border-radius: 8px;
}
.toolbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  color: #57544e;
  border-radius: 8px;
}
.toolbar-button:hover,
.toolbar-icon:hover {
  background: #f4efe4;
  color: #1f1f1f;
}
.show-toolbar {
  position: fixed;
  top: 10px;
  right: 16px;
  z-index: 5;
  border: 1px solid #e3e2df;
  background: #fff;
  box-shadow: 0 2px 8px #2d2b2714;
}
.show-toolbar[hidden] {
  display: none;
}
#toggle-theme .icon-sun,
:root[data-theme='dark'] #toggle-theme .icon-moon {
  display: none;
}
:root[data-theme='dark'] #toggle-theme .icon-sun {
  display: block;
}

/* Customize AI dialog. */
#customize-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: min(820px, calc(100dvh - 32px));
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #fff;
  color: #1f1f1f;
  box-shadow: 0 24px 64px #0000003d;
}
#customize-dialog::backdrop {
  background: #14131280;
}
.customize {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}
.customize-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid #e7e6e4;
}
.customize-head h2 {
  font-size: 18px;
  font-weight: 600;
}
.customize-head p {
  font-size: 12px;
  margin: 6px 0 0;
}
.dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #e3e2df;
  border-radius: 8px;
  background: transparent;
  color: #57544e;
}
.customize-body {
  overflow-y: auto;
  padding: 18px 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
.customize-body h3 {
  margin: 4px 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #85817a;
}
#custom-moods-section {
  margin-top: 18px;
}
.mood-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.mood-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid #e3e2df;
  border-radius: 12px;
  background: #f7f7f7;
  color: #1f1f1f;
  text-align: left;
}
.mood-card:hover {
  border-color: #cfcdc8;
}
.mood-card[aria-pressed='true'] {
  border-color: #1f1f1f;
  background: #f4efe4;
  box-shadow: inset 0 0 0 1px #1f1f1f;
}
.mood-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 18px;
  font-size: 13px;
}
.mood-description {
  font-size: 11px;
  line-height: 1.5;
  color: #76726a;
  overflow-wrap: anywhere;
}
.mood-remove {
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 0 4px;
  border-radius: 6px;
  color: #85817a;
  font-size: 16px;
  line-height: 1.2;
}
.mood-remove:hover {
  background: #e7e6e4;
  color: #1f1f1f;
}
.create-mood {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
  padding: 13px 16px;
  border: 1px solid #1f1f1f;
  border-radius: 12px;
  background: #f9f6ee;
  color: #1f1f1f;
  font-size: 13px;
  font-weight: 600;
}
#mood-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
#mood-editor[hidden] {
  display: none;
}
#mood-name,
#mood-text {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #e3e2df;
  border-radius: 10px;
  background: #fafafa;
  color: #1f1f1f;
  font: inherit;
  font-size: 13px;
}
#mood-text {
  min-height: 110px;
  max-height: 220px;
  resize: vertical;
}
.mood-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
}
.customize-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid #e7e6e4;
}
.spacer {
  flex: 1;
}
.primary-button,
.secondary-button,
.link-button {
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
}
.primary-button {
  background: #1f1f1f;
  color: #fff;
  font-weight: 600;
}
.secondary-button {
  border: 1px solid #e3e2df;
  background: transparent;
  color: #1f1f1f;
}
#save-mood {
  align-self: flex-end;
}
.link-button {
  padding: 10px 6px;
  background: transparent;
  color: #1f1f1f;
}
.link-button:disabled {
  color: #a8a49d;
  cursor: default;
}
@media (max-width: 520px) {
  .mood-grid {
    grid-template-columns: 1fr;
  }
}

/* Dark theme. Light colors above are the defaults; these override the surfaces, text, borders
   and accents that carry them. */
:root[data-theme='dark'] {
  color-scheme: dark;
  color: #e7e6e3;
  background: #141414;
  --scrollbar-thumb: #423f3a;
  --scrollbar-thumb-hover: #54514b;
}
:root[data-theme='dark'] body {
  background: #141414;
}
:root[data-theme='dark'] aside {
  background: #181818;
  border-right-color: #312f2c;
}
:root[data-theme='dark'] .brand,
:root[data-theme='dark'] .run-title,
:root[data-theme='dark'] .filter-item,
:root[data-theme='dark'] .model-name strong,
:root[data-theme='dark'] h1,
:root[data-theme='dark'] h2,
:root[data-theme='dark'] .response-text,
:root[data-theme='dark'] #prompt,
:root[data-theme='dark'] #models-search,
:root[data-theme='dark'] .secondary-button,
:root[data-theme='dark'] #customize-dialog,
:root[data-theme='dark'] .mood-card {
  color: #e7e6e3;
}
:root[data-theme='dark'] .muted,
:root[data-theme='dark'] .filter-count,
:root[data-theme='dark'] .history-heading h2,
:root[data-theme='dark'] #toggle-runs,
:root[data-theme='dark'] .aside-bottom,
:root[data-theme='dark'] .aside-bottom small,
:root[data-theme='dark'] .notice,
:root[data-theme='dark'] #count,
:root[data-theme='dark'] .mood-description,
:root[data-theme='dark'] .customize-body h3,
:root[data-theme='dark'] .filter-group h2,
:root[data-theme='dark'] .user-meta,
:root[data-theme='dark'] .suggestions button,
:root[data-theme='dark'] #feedback {
  color: #a4a099;
}
:root[data-theme='dark'] #new-chat,
:root[data-theme='dark'] #open-models,
:root[data-theme='dark'] #history-new-chat,
:root[data-theme='dark'] .filters-link,
:root[data-theme='dark'] .toolbar-button,
:root[data-theme='dark'] .toolbar-icon,
:root[data-theme='dark'] .action-button,
:root[data-theme='dark'] #attach-image,
:root[data-theme='dark'] .dialog-close,
:root[data-theme='dark'] .link-button {
  color: #d9c08a;
}
:root[data-theme='dark'] #new-chat:hover,
:root[data-theme='dark'] #open-models:hover,
:root[data-theme='dark'] #open-models[aria-pressed='true'],
:root[data-theme='dark'] #history-new-chat:hover,
:root[data-theme='dark'] #toggle-runs:hover,
:root[data-theme='dark'] .run-row:hover,
:root[data-theme='dark'] .run-row[aria-current='true'],
:root[data-theme='dark'] .filters-link:hover:not(:disabled),
:root[data-theme='dark'] .filter-item:hover,
:root[data-theme='dark'] .filter-item[aria-pressed='true'],
:root[data-theme='dark'] .toolbar-button:hover,
:root[data-theme='dark'] .toolbar-icon:hover,
:root[data-theme='dark'] .action-button:hover:not(:disabled),
:root[data-theme='dark'] .action-button.active,
:root[data-theme='dark'] #attach-image:hover:not(:disabled) {
  background: #2a2a2a;
  color: #efe2c4;
}
:root[data-theme='dark'] .response-card,
:root[data-theme='dark'] #prompt-form,
:root[data-theme='dark'] .model-card,
:root[data-theme='dark'] .models-search,
:root[data-theme='dark'] #scroll-bottom,
:root[data-theme='dark'] .show-toolbar,
:root[data-theme='dark'] #customize-dialog {
  background: #1f1f1f;
  border-color: #363430;
}
:root[data-theme='dark'] .history-heading {
  background: #181818;
}
:root[data-theme='dark'] .user-message {
  background: #2b2620;
  border-color: #4a3f2b;
  color: #efe7d6;
}
:root[data-theme='dark'] .user-meta .user-label {
  color: #efe7d6;
}
:root[data-theme='dark'] .user-avatar {
  background: #1f1f1f;
}
:root[data-theme='dark'] #submit,
:root[data-theme='dark'] .primary-button {
  background: #d4a017;
  color: #1f1f1f;
}
:root[data-theme='dark'] #submit:disabled {
  background: #3b3935;
  color: #89847b;
}
:root[data-theme='dark'] .model-status {
  background: #2c2a27;
  color: #a4a099;
}
:root[data-theme='dark'] .model-status.available {
  background: #383631;
  color: #e8d9b5;
}
:root[data-theme='dark'] .model-tag,
:root[data-theme='dark'] .tag {
  border-color: #3e3c37;
  color: #b4b1ab;
}
:root[data-theme='dark'] .mood-card,
:root[data-theme='dark'] #mood-name,
:root[data-theme='dark'] #mood-text {
  background: #282623;
  border-color: #393732;
}
:root[data-theme='dark'] .mood-card[aria-pressed='true'] {
  background: #2a2a2a;
  border-color: #9d9990;
  box-shadow: inset 0 0 0 1px #9d9990;
}
:root[data-theme='dark'] .create-mood {
  background: #272522;
  border-color: #d4a017;
  color: #e8d9b5;
}
:root[data-theme='dark'] .customize-head,
:root[data-theme='dark'] .customize-foot {
  border-color: #312f2c;
}
:root[data-theme='dark'] .dialog-close,
:root[data-theme='dark'] .secondary-button {
  border-color: #3e3c37;
}
:root[data-theme='dark'] #pricing-notice {
  background: #2f2a17;
  border-color: #5a4d22;
  color: #e6d29a;
}
:root[data-theme='dark'] #pricing-notice.expired {
  background: #34201c;
  border-color: #6a3a31;
  color: #f0b9ad;
}
:root[data-theme='dark'] #attachment-image {
  border-color: #363430;
}
:root[data-theme='dark'] #remove-image {
  border-color: #1f1f1f;
}

/* Response header: mood icon and name with the time, mirroring the prompt's header. */
.response-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 11px;
  color: #8e897f;
}
.response-mood-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f4efe4;
  font-size: 12px;
  line-height: 1;
}
/* Brand v3.0: the AIONFLARE flare marks AION's own answers. */
.response-mood-default {
  border: 1px solid #ece2cc;
  background: #fffdf9 url('brand/aionflare-icon.png') center / 78% no-repeat;
}
.response-mood {
  font-weight: 600;
  color: #1f1f1f;
}
.response-status {
  padding: 2px 8px;
  border-radius: 10px;
  background: #fbefec;
  color: #8a3b2c;
}
:root[data-theme='dark'] .response-mood-icon {
  background: #2a2a2a;
}
:root[data-theme='dark'] .response-mood-default {
  border-color: #3a3122;
  background-color: #24211b;
}
:root[data-theme='dark'] .response-mood {
  color: #e8d9b5;
}
:root[data-theme='dark'] .response-meta {
  color: #a4a099;
}
:root[data-theme='dark'] .response-status {
  background: #34201c;
  color: #f0b9ad;
}

/* Owner-only live check on configured cloud models. */
.live-check {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #edecea;
}
.live-check-button {
  padding: 6px 10px;
  border: 1px solid #cfcdc8;
  border-radius: 8px;
  background: transparent;
  color: #1f1f1f;
  font-size: 11px;
}
.live-check-button:hover:not(:disabled) {
  background: #f4efe4;
}
.live-check-button:disabled {
  opacity: 0.6;
  cursor: default;
}
.live-check-result {
  margin: 0;
  font-size: 11px;
  color: #85817a;
}
.live-check-result.passed {
  color: #363636;
}
.live-check-result.failed {
  color: #a04432;
}
:root[data-theme='dark'] .live-check {
  border-color: #312f2c;
}
:root[data-theme='dark'] .live-check-button {
  border-color: #3e3c37;
  color: #e8d9b5;
}
:root[data-theme='dark'] .live-check-result.passed {
  color: #d4a017;
}
:root[data-theme='dark'] .live-check-result.failed {
  color: #f0a898;
}

/* Model picker in the prompt box, its "Now using" popover and menu. */
.model-picker {
  position: relative;
  flex-shrink: 0;
  margin-bottom: 2px;
}
#model-picker-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  max-width: 190px;
  padding: 0 10px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: #58554e;
  font-size: 13px;
  cursor: pointer;
}
#model-picker-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#model-picker-button:hover,
#model-picker-button[aria-expanded='true'] {
  background: #f4efe4;
}
.model-now,
.model-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  z-index: 20;
  border-radius: 14px;
  box-shadow: 0 10px 30px #0000002e;
}
.model-now {
  width: max-content;
  max-width: min(340px, calc(100vw - 32px));
  padding: 12px 14px;
  background: #24221f;
  color: #f3f3f2;
}
.model-now::after {
  content: '';
  position: absolute;
  right: 40px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: #24221f;
  transform: rotate(45deg);
}
.model-now-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.model-now-title {
  flex: 1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b8b5ae;
}
.model-now-change,
.model-now-close {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.model-now-change {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d4a017;
}
.model-now-close {
  font-size: 18px;
  line-height: 1;
  color: #b8b5ae;
}
.model-now-body {
  margin: 8px 0 0;
  font-size: 13px;
}
.model-now-body strong {
  font-size: 15px;
  margin-right: 6px;
}
#model-now-detail {
  color: #b8b5ae;
}
.model-menu {
  width: 300px;
  max-width: calc(100vw - 32px);
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid #e3e2df;
}
.model-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
}
.model-option .muted {
  font-size: 12px;
}
.model-option:hover {
  background: #f4f4f3;
}
.model-option[aria-selected='true'] {
  background: #f1eada;
}
.run-in-chat {
  align-self: flex-start;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1f1f1f;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.run-in-chat:hover {
  text-decoration: underline;
}
:root[data-theme='dark'] #model-picker-button {
  color: #d0ceca;
}
:root[data-theme='dark'] #model-picker-button:hover,
:root[data-theme='dark'] #model-picker-button[aria-expanded='true'] {
  background: #312f2b;
}
:root[data-theme='dark'] .model-menu {
  background: #1f1f1f;
  border-color: #3c3a35;
}
:root[data-theme='dark'] .model-option {
  color: #e7e6e4;
}
:root[data-theme='dark'] .model-option:hover {
  background: #2c2a27;
}
:root[data-theme='dark'] .model-option[aria-selected='true'] {
  background: #383631;
}
:root[data-theme='dark'] .run-in-chat {
  color: #d9c08a;
}
:root[data-theme='dark'] .model-now,
:root[data-theme='dark'] .model-now::after {
  background: #121110;
}

/* Collapsible sidebar: it shrinks to an icon rail with the menu icons; the page takes the rest. */
aside,
.page {
  transition:
    width 0.2s ease,
    margin-left 0.2s ease,
    padding 0.2s ease;
}
body.sidebar-collapsed aside {
  width: 64px;
  padding: 28px 8px 16px;
  align-items: center;
}
body.sidebar-collapsed .page {
  margin-left: 64px;
  width: calc(100% - 64px);
}
body.sidebar-collapsed .brand {
  margin-left: 0;
}
body.sidebar-collapsed .brand-rest,
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed #models-filters,
body.sidebar-collapsed #history,
body.sidebar-collapsed #account,
body.sidebar-collapsed .aside-bottom {
  display: none !important;
}
body.sidebar-collapsed aside > nav,
body.sidebar-collapsed .sidebar-scroll,
body.sidebar-collapsed .nav-more {
  width: 100%;
}
body.sidebar-collapsed #new-chat,
body.sidebar-collapsed #open-models {
  justify-content: center;
  gap: 0;
  padding: 12px 0;
}
@media (max-width: 650px) {
  body.sidebar-collapsed aside {
    display: none;
  }
  body.sidebar-collapsed .page {
    margin-left: 0;
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  aside,
  .page {
    transition: none;
  }
}

/* Resizable sidebar (wider screens only): a drag handle on its right edge sets --sidebar-width. */
.sidebar-resize {
  display: none;
}
@media (min-width: 651px) {
  aside {
    width: var(--sidebar-width, 280px);
  }
  .page {
    margin-left: var(--sidebar-width, 280px);
    width: calc(100% - var(--sidebar-width, 280px));
  }
  .sidebar-resize {
    display: block;
    position: absolute;
    top: 0;
    right: -4px;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    touch-action: none;
    z-index: 6;
  }
  .sidebar-resize::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 3px;
    width: 2px;
    background: transparent;
    transition: background 0.15s ease;
  }
  .sidebar-resize:hover::after,
  .sidebar-resize:focus-visible::after,
  body.sidebar-resizing .sidebar-resize::after {
    background: #d4a017;
  }
  .sidebar-resize:focus-visible {
    outline: none;
  }
  body.sidebar-resizing {
    cursor: col-resize;
    user-select: none;
  }
  body.sidebar-resizing aside,
  body.sidebar-resizing .page {
    transition: none;
  }
}
:root[data-theme='dark'] .sidebar-resize:hover::after,
:root[data-theme='dark'] .sidebar-resize:focus-visible::after,
:root[data-theme='dark'] body.sidebar-resizing .sidebar-resize::after {
  background: #807b71;
}

/* "How this answer was made" under a panel answer (ADR-0011). */
.panel-report {
  margin-top: 12px;
  font-size: 13px;
  color: #58554e;
}
.panel-report summary {
  cursor: pointer;
  font-weight: 600;
  color: #1f1f1f;
}
.panel-steps,
.panel-disagreements {
  margin: 8px 0 0;
  padding-left: 18px;
  line-height: 1.7;
}
.panel-heading {
  margin: 10px 0 0;
  font-weight: 600;
}
:root[data-theme='dark'] .panel-report {
  color: #d0ceca;
}
:root[data-theme='dark'] .panel-report summary {
  color: #d9c08a;
}

/* Answers rendered from Markdown, and follow-up suggestions. */
.response-text.markdown {
  white-space: normal;
}
.markdown > :first-child {
  margin-top: 0;
}
.markdown > :last-child {
  margin-bottom: 0;
}
.markdown p {
  margin: 0 0 12px;
}
.markdown ol,
.markdown ul {
  margin: 0 0 12px;
  padding-left: 24px;
}
.markdown li {
  margin: 6px 0;
}
.markdown-heading {
  margin: 16px 0 8px;
  font-size: 15px;
  line-height: 1.5;
}
.markdown code {
  padding: 1px 5px;
  border-radius: 5px;
  background: #f2f1f0;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.92em;
}
.markdown pre {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f5f4f3;
  overflow-x: auto;
  line-height: 1.55;
}
.markdown pre code {
  padding: 0;
  background: none;
}
.follow-ups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.follow-up-chip {
  padding: 7px 12px;
  border: 1px solid #dfdedb;
  border-radius: 16px;
  background: #fff;
  color: #4e4b46;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.follow-up-chip:hover {
  background: #f4efe4;
}
:root[data-theme='dark'] .markdown code,
:root[data-theme='dark'] .markdown pre {
  background: #292724;
}
:root[data-theme='dark'] .follow-up-chip {
  border-color: #3e3c37;
  background: #1f1f1f;
  color: #d0ceca;
}
:root[data-theme='dark'] .follow-up-chip:hover {
  background: #2c2a27;
}

/* Code blocks: copy button and syntax colours (light and dark). */
.code-block {
  position: relative;
  margin: 0 0 12px;
}
.code-block pre {
  margin: 0;
  padding-right: 44px;
}
.code-copy {
  position: absolute;
  top: 6px;
  right: 6px;
}
.markdown pre code {
  color: #262421;
}
.tok-keyword {
  color: #0033b3;
}
.tok-literal {
  color: #0033b3;
}
.tok-string {
  color: #a31515;
}
.tok-comment {
  color: #6a8759;
  font-style: italic;
}
.tok-number {
  color: #098658;
}
.tok-function {
  color: #795e26;
}
.tok-type {
  color: #267f99;
}
:root[data-theme='dark'] .markdown pre code {
  color: #d4d4d4;
}
:root[data-theme='dark'] .tok-keyword,
:root[data-theme='dark'] .tok-literal {
  color: #569cd6;
}
:root[data-theme='dark'] .tok-string {
  color: #ce9178;
}
:root[data-theme='dark'] .tok-comment {
  color: #6a9955;
}
:root[data-theme='dark'] .tok-number {
  color: #b5cea8;
}
:root[data-theme='dark'] .tok-function {
  color: #dcdcaa;
}
:root[data-theme='dark'] .tok-type {
  color: #4ec9b0;
}

/* Answer feedback (ADR-0012). */
.action-button[aria-pressed='true'] {
  color: #272727;
  background: #f1eada;
}
.feedback-panel {
  margin: 4px 0 0;
  padding: 12px 14px;
  border: 1px solid #e3e2df;
  border-radius: 12px;
  background: #fcfaf7;
}
.feedback-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
}
.feedback-reasons,
.feedback-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.feedback-reason {
  padding: 6px 12px;
  border: 1px solid #dfdedb;
  border-radius: 16px;
  background: #fff;
  color: #4e4b46;
  font-size: 12.5px;
  cursor: pointer;
}
.feedback-reason[aria-pressed='true'] {
  background: #f1eada;
  border-color: #d4a017;
  font-weight: 600;
}
.feedback-comment {
  width: 100%;
  margin: 10px 0;
  padding: 8px 10px;
  border: 1px solid #dfdedb;
  border-radius: 10px;
  font: inherit;
  font-size: 13px;
  resize: vertical;
}
.feedback-submit,
.feedback-better {
  padding: 7px 14px;
  border-radius: 16px;
  font-size: 13px;
  cursor: pointer;
}
.feedback-submit {
  border: 1px solid #dfdedb;
  background: #fff;
  color: #4e4b46;
}
.feedback-better {
  border: 0;
  background: #272727;
  color: #fff;
}
.feedback-better:disabled {
  background: #ceccc7;
  cursor: default;
}
.feedback-status {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: #69655e;
}
:root[data-theme='dark'] .action-button[aria-pressed='true'] {
  color: #e8d9b5;
  background: #383631;
}
:root[data-theme='dark'] .feedback-panel {
  border-color: #3c3a35;
  background: #1f1e1b;
}
:root[data-theme='dark'] .feedback-reason,
:root[data-theme='dark'] .feedback-submit,
:root[data-theme='dark'] .feedback-comment {
  border-color: #3e3c37;
  background: #1f1f1f;
  color: #d0ceca;
}
:root[data-theme='dark'] .feedback-reason[aria-pressed='true'] {
  background: #383631;
  border-color: #5d5a53;
}

/* AION Unlimited row in the model menu. */
.model-upgrade {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  border-top: 1px solid #edecea;
  border-radius: 0 0 10px 10px;
  cursor: default;
}
.model-upgrade:hover {
  background: transparent;
}
.model-upgrade-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.model-upgrade-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}
.model-upgrade-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: #1f1f1f;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.model-upgrade-soon {
  font-size: 10.5px;
  color: #969289;
}
:root[data-theme='dark'] .model-upgrade {
  border-top-color: #3c3a35;
}
:root[data-theme='dark'] .model-upgrade-link {
  color: #d9c08a;
}

/* Menu options use dark text (site buttons default to white text). */
.model-option {
  color: #2d2b27;
}
.model-option strong {
  color: inherit;
  font-weight: 650;
}
:root[data-theme='dark'] .model-option {
  color: #e7e6e4;
}

/* Route evaluation (ADR-0013, opened with #evaluate). */
#evaluate-dialog {
  width: min(620px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - 32px));
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #fff;
  color: #1f1f1f;
  box-shadow: 0 24px 64px #0000003d;
}
#evaluate-dialog::backdrop {
  background: #14131280;
}
.evaluate-body {
  padding: 16px 24px 22px;
}
.evaluate-status {
  margin-bottom: 14px;
  font-size: 14px;
}
.evaluate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.evaluate-actions button {
  padding: 8px 14px;
  border: 1px solid #e2e1de;
  border-radius: 999px;
  background: #fff;
  color: #363430;
  font-size: 13px;
  cursor: pointer;
}
.evaluate-actions button:disabled {
  opacity: 0.45;
  cursor: default;
}
.evaluate-actions .evaluate-primary {
  border-color: #1f1f1f;
  background: #1f1f1f;
  color: #fff;
}
.evaluate-progress {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.8;
}
:root[data-theme='dark'] #evaluate-dialog {
  background: #1f1f1f;
  color: #e1e0de;
}
:root[data-theme='dark'] .evaluate-actions button {
  background: #292825;
  border-color: #3c3a35;
  color: #e1e0de;
}
:root[data-theme='dark'] .evaluate-actions .evaluate-primary {
  background: #393939;
  border-color: #393939;
  color: #fff;
}

/* ADR-0014: My files, memory, sources under answers and the "Answer from my files" switch. */
.nav-extra {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  color: #1f1f1f;
  padding: 13px;
  font-size: 13px;
  margin: 0 0 6px;
}
.nav-extra:hover {
  background: #f4efe4;
}
body.sidebar-collapsed .nav-extra {
  justify-content: center;
  gap: 0;
  padding: 12px 0;
}
#use-files {
  position: static;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-bottom: 2px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #1f1f1f;
}
#use-files[hidden] {
  display: none;
}
#use-files:hover:not(:disabled) {
  background: #f4efe4;
}
#use-files[aria-pressed='true'] {
  background: #eee6d2;
  color: #1d1d1d;
  box-shadow: inset 0 0 0 1px #d4a017;
}
.knowledge-dialog {
  width: min(600px, calc(100vw - 32px));
  max-height: min(820px, calc(100dvh - 32px));
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #fff;
  color: #1f1f1f;
  box-shadow: 0 24px 64px #0000003d;
}
.knowledge-dialog::backdrop {
  background: #14131280;
}
.knowledge-dialog h3 {
  margin: 18px 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #85817a;
}
.knowledge-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
.knowledge-status {
  min-height: 18px;
  margin: 10px 0;
  font-size: 13px;
  color: #1f1f1f;
}
.knowledge-note,
.knowledge-foot-note {
  font-size: 12px;
}
.knowledge-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.knowledge-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid #efeeec;
}
.knowledge-item:first-child {
  border-top: 0;
}
.knowledge-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
  font-size: 12px;
}
.knowledge-name {
  font-size: 14px;
  color: #1f1f1f;
  overflow-wrap: anywhere;
}
.knowledge-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.knowledge-actions .secondary-button {
  padding: 7px 12px;
}
.knowledge-empty {
  padding: 12px 0;
  font-size: 13px;
}
.memory-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  cursor: pointer;
}
.memory-switch input {
  width: 18px;
  height: 18px;
  accent-color: #1f1f1f;
}
.memory-add {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.memory-add select,
.memory-add input,
.memory-edit {
  padding: 9px 11px;
  border: 1px solid #e3e2df;
  border-radius: 10px;
  background: #fafafa;
  color: #1f1f1f;
  font: inherit;
  font-size: 13px;
}
.memory-add input,
.memory-edit {
  flex: 1;
  min-width: 0;
}
.memory-add button {
  padding: 9px 14px;
}
.memory-add :disabled {
  opacity: 0.55;
  cursor: default;
}
@media (max-width: 520px) {
  .memory-add {
    flex-wrap: wrap;
  }
  .memory-add input {
    flex-basis: 100%;
    order: -1;
  }
  .knowledge-item {
    flex-wrap: wrap;
  }
}
.answer-sources,
.memory-suggestions {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #e7e6e4;
  border-radius: 12px;
  font-size: 13px;
}
.sources-title {
  margin: 0 0 6px;
  font-weight: 600;
  color: #1f1f1f;
}
.answer-sources > .muted {
  margin: 0;
}
.sources-list {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.7;
}
.source {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}
.source-label {
  display: inline-block;
  min-width: 26px;
  padding: 0 6px;
  border-radius: 6px;
  background: #f4efe4;
  color: #1f1f1f;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.source:not(.cited) .source-label,
.source:not(.cited) .source-name {
  opacity: 0.6;
}
.source-name {
  overflow-wrap: anywhere;
}
.memory-used {
  margin-top: 10px;
  padding: 3px 10px;
  border: 1px solid #dfdedb;
  border-radius: 12px;
  background: transparent;
  color: #1f1f1f;
  font-size: 12px;
}
.memory-used:hover {
  background: #f4efe4;
}
.memory-suggestion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.memory-suggestion .memory-text {
  flex: 1;
  min-width: 180px;
}
.memory-suggestion .secondary-button {
  padding: 6px 12px;
}
.memory-suggestion .link-button {
  padding: 6px 4px;
}
:root[data-theme='dark'] .nav-extra,
:root[data-theme='dark'] #use-files,
:root[data-theme='dark'] .memory-used {
  color: #d9c08a;
}
:root[data-theme='dark'] .nav-extra:hover,
:root[data-theme='dark'] #use-files:hover:not(:disabled),
:root[data-theme='dark'] .memory-used:hover {
  background: #2a2a2a;
  color: #efe2c4;
}
:root[data-theme='dark'] #use-files[aria-pressed='true'] {
  background: #383631;
  color: #efe2c4;
  box-shadow: inset 0 0 0 1px #1f1f1f;
}
:root[data-theme='dark'] .knowledge-dialog {
  background: #1f1f1f;
  color: #e7e6e3;
}
:root[data-theme='dark'] .knowledge-dialog .customize-head,
:root[data-theme='dark'] .knowledge-dialog .customize-foot,
:root[data-theme='dark'] .knowledge-item,
:root[data-theme='dark'] .answer-sources,
:root[data-theme='dark'] .memory-suggestions,
:root[data-theme='dark'] .memory-used {
  border-color: #363430;
}
:root[data-theme='dark'] .knowledge-name {
  color: #e7e6e3;
}
:root[data-theme='dark'] .knowledge-dialog h3 {
  color: #a4a099;
}
:root[data-theme='dark'] .memory-add select,
:root[data-theme='dark'] .memory-add input,
:root[data-theme='dark'] .memory-edit {
  background: #282623;
  border-color: #393732;
  color: #e7e6e3;
}
:root[data-theme='dark'] .knowledge-status,
:root[data-theme='dark'] .sources-title {
  color: #d9c08a;
}
:root[data-theme='dark'] .source-label {
  background: #2a2a2a;
  color: #e8d9b5;
}

/* Profile menu (bottom of the sidebar) and Settings dialog, light and dark. */
.profile {
  position: relative;
  flex-shrink: 0;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e7e6e4;
}
.profile-button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border-radius: 12px;
  background: transparent;
  color: #1f1f1f;
  text-align: left;
}
.profile-button:hover,
.profile-button[aria-expanded='true'] {
  background: #f4efe4;
}
.profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1f1f1f, #1f1f1f);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.profile-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.profile-text strong {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-text small {
  font-size: 11px;
  color: #827e77;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 30;
  min-width: 220px;
  padding: 8px;
  border: 1px solid #e7e6e4;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 40px #14131226;
}
.profile-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid #efeeec;
}
.profile-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 9px;
  background: transparent;
  color: #1f1f1f;
  font-size: 13px;
  text-align: left;
}
.profile-item:hover,
.profile-item:focus-visible {
  background: #f4efe4;
  outline: none;
}
.profile-menu hr {
  margin: 6px 0;
  border: 0;
  border-top: 1px solid #efeeec;
}
#menu-logout {
  color: #c2412d;
}
#menu-logout:hover,
#menu-logout:focus-visible {
  background: #fbebe7;
}
body.sidebar-collapsed .profile-button {
  justify-content: center;
  padding: 8px 0;
}
body.sidebar-collapsed .profile-menu {
  right: auto;
  width: 240px;
}

.settings-dialog {
  width: min(860px, calc(100vw - 32px));
  height: min(620px, calc(100dvh - 32px));
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #fff;
  color: #1f1f1f;
  box-shadow: 0 24px 64px #0000003d;
}
.settings-dialog::backdrop {
  background: #14131280;
}
.settings {
  display: flex;
  height: 100%;
}
.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 210px;
  flex-shrink: 0;
  padding: 22px 14px 14px;
  border-right: 1px solid #e7e6e4;
  background: #fafafa;
}
.settings-nav h2 {
  margin: 0 8px;
  font-size: 16px;
  font-weight: 600;
}
.settings-nav > small {
  margin: 2px 8px 0;
  font-size: 11px;
  color: #827e77;
}
.settings-nav hr {
  width: 100%;
  margin: 12px 0;
  border: 0;
  border-top: 1px solid #e7e6e4;
}
.settings-tab,
.settings-close {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 9px;
  background: transparent;
  color: #57544e;
  font-size: 13px;
  text-align: left;
}
.settings-tab:hover,
.settings-close:hover {
  background: #f4efe4;
}
.settings-tab[aria-current='true'] {
  background: #f4efe4;
  color: #1d1d1d;
  font-weight: 600;
}
.settings-body {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 26px 30px;
}
.settings-body h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.settings-body h3 + .muted {
  margin: 4px 0 22px;
  font-size: 13px;
}
.settings-label {
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
}
.settings-row {
  display: flex;
  gap: 8px;
}
.settings-row input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #e3e2df;
  border-radius: 10px;
  background: #fafafa;
  color: #1f1f1f;
  font: inherit;
  font-size: 14px;
}
.settings-row .primary-button:disabled {
  opacity: 0.45;
  cursor: default;
}
.settings-hint {
  margin: 6px 0 20px;
  font-size: 11px;
}
#account-email {
  margin: 0 0 12px;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.theme-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e3e2df;
  border-radius: 12px;
  background: transparent;
  color: #1f1f1f;
  font-size: 13px;
}
.theme-option[aria-checked='true'] {
  border-color: #1f1f1f;
  box-shadow: 0 0 0 2px #1f1f1f33;
  font-weight: 600;
}
.theme-swatch {
  width: 100%;
  height: 64px;
  border-radius: 8px;
  border: 1px solid #e1e0de;
}
.theme-swatch.light {
  background: linear-gradient(#ffffff 30%, #f8f6ef 30%);
}
.theme-swatch.dark {
  background: linear-gradient(#1f1f1f 30%, #141414 30%);
}
.theme-swatch.system {
  background: linear-gradient(90deg, #f8f6ef 50%, #141414 50%);
}
.privacy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid #efeeec;
  font-size: 14px;
}
.privacy-row > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.privacy-row small {
  font-size: 12px;
}
.danger-zone {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid #f2c9c0;
  border-radius: 12px;
  background: #fdf1ee;
  font-size: 13px;
}
.danger-zone strong {
  color: #c2412d;
}
.danger-zone p {
  margin: 6px 0 0;
  color: #6b4a43;
}
@media (max-width: 640px) {
  .settings {
    flex-direction: column;
  }
  .settings-nav {
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: 0;
    border-bottom: 1px solid #e7e6e4;
    padding: 14px;
  }
  .settings-nav h2,
  .settings-nav > small,
  .settings-nav hr,
  .settings-nav .spacer {
    display: none;
  }
  .settings-tab,
  .settings-close {
    width: auto;
  }
  .settings-body {
    padding: 20px 16px;
  }
  .theme-options {
    grid-template-columns: 1fr;
  }
}

:root[data-theme='dark'] .profile,
:root[data-theme='dark'] .profile-card,
:root[data-theme='dark'] .profile-menu hr,
:root[data-theme='dark'] .settings-nav,
:root[data-theme='dark'] .settings-nav hr,
:root[data-theme='dark'] .privacy-row {
  border-color: #363430;
}
:root[data-theme='dark'] .profile-button,
:root[data-theme='dark'] .profile-item,
:root[data-theme='dark'] .settings-dialog,
:root[data-theme='dark'] .theme-option {
  color: #e7e6e3;
}
:root[data-theme='dark'] .profile-button:hover,
:root[data-theme='dark'] .profile-button[aria-expanded='true'],
:root[data-theme='dark'] .profile-item:hover,
:root[data-theme='dark'] .profile-item:focus-visible,
:root[data-theme='dark'] .settings-tab:hover,
:root[data-theme='dark'] .settings-close:hover,
:root[data-theme='dark'] .settings-tab[aria-current='true'] {
  background: #2a2a2a;
  color: #efe2c4;
}
:root[data-theme='dark'] .profile-menu,
:root[data-theme='dark'] .settings-dialog {
  background: #1f1f1f;
  border-color: #363430;
}
:root[data-theme='dark'] .settings-nav {
  background: #181818;
}
:root[data-theme='dark'] .settings-tab,
:root[data-theme='dark'] .settings-close,
:root[data-theme='dark'] .profile-text small,
:root[data-theme='dark'] .settings-nav > small {
  color: #a4a099;
}
:root[data-theme='dark'] .settings-row input {
  background: #282623;
  border-color: #393732;
  color: #e7e6e3;
}
:root[data-theme='dark'] .theme-option {
  border-color: #393732;
}
:root[data-theme='dark'] .theme-option[aria-checked='true'] {
  border-color: #8c877d;
}
:root[data-theme='dark'] .theme-swatch {
  border-color: #423f3a;
}
:root[data-theme='dark'] #menu-logout {
  color: #f08a76;
}
:root[data-theme='dark'] #menu-logout:hover,
:root[data-theme='dark'] #menu-logout:focus-visible {
  background: #3a2622;
}
:root[data-theme='dark'] .danger-zone {
  background: #2a1d1a;
  border-color: #5a3229;
}
:root[data-theme='dark'] .danger-zone strong {
  color: #f08a76;
}
:root[data-theme='dark'] .danger-zone p {
  color: #d9b8b0;
}

/* Dictation button in the prompt box. */
#dictate {
  position: static;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-bottom: 2px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #1f1f1f;
}
#dictate[hidden] {
  display: none;
}
#dictate:hover:not(:disabled) {
  background: #f4efe4;
}
#dictate[aria-pressed='true'] {
  background: #fbebe7;
  color: #c2412d;
  animation: dictating 1.4s ease-in-out infinite;
}
@keyframes dictating {
  50% {
    box-shadow: 0 0 0 6px #c2412d22;
  }
}
@media (prefers-reduced-motion: reduce) {
  #dictate[aria-pressed='true'] {
    animation: none;
  }
}
:root[data-theme='dark'] #dictate {
  color: #d9c08a;
}
:root[data-theme='dark'] #dictate:hover:not(:disabled) {
  background: #2a2a2a;
}
:root[data-theme='dark'] #dictate[aria-pressed='true'] {
  background: #3a2622;
  color: #f08a76;
}

/* Brand typography and accents. */
h1,
h2,
h3,
.customize-head h2,
.settings-nav h2,
.settings-body h3 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
:root[data-theme='dark'] .brand {
  color: #f8f4ec;
}

/* ADR-0015: Search the web switch, web sources and Google's suggestions frame. */
#web-search {
  position: static;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-bottom: 2px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #1f1f1f;
}
#web-search[hidden] {
  display: none;
}
#web-search:hover:not(:disabled) {
  background: #f4efe4;
}
#web-search[aria-pressed='true'] {
  background: #f3ead6;
  color: #1f1f1f;
  box-shadow: inset 0 0 0 1px #d4a017;
}
.web-sources a.source-name {
  color: #1f1f1f;
  text-decoration: none;
}
.web-sources a.source-name:hover {
  text-decoration: underline;
}
.search-suggestions {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: 8px;
  border: 0;
  background: transparent;
}
:root[data-theme='dark'] #web-search {
  color: #d9c08a;
}
:root[data-theme='dark'] #web-search:hover:not(:disabled) {
  background: #2a2a2a;
}
:root[data-theme='dark'] #web-search[aria-pressed='true'] {
  background: #3a3122;
  color: #efe2c4;
  box-shadow: inset 0 0 0 1px #8f7840;
}
:root[data-theme='dark'] .web-sources a.source-name {
  color: #d9c08a;
}

/* Copy, share and edit under the member's own prompt: shown on hover or keyboard focus. */
.user-actions {
  display: flex;
  justify-content: flex-end;
  gap: 2px;
  margin-top: 6px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.user-turn:hover .user-actions,
.user-turn:focus-within .user-actions {
  opacity: 1;
}
@media (hover: none) {
  .user-actions {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .user-actions {
    transition: none;
  }
}

/* In-place prompt editor (Edit under a prompt). */
.prompt-editor {
  width: min(640px, 100%);
  padding: 10px;
  border: 1px solid #ddd1b5;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 18px #1f1f1f14;
}
.prompt-editor-text {
  width: 100%;
  min-height: 52px;
  max-height: 320px;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  color: #1f1f1f;
  font: inherit;
  font-size: 14px;
  line-height: 1.6;
  resize: none;
  outline: none;
}
.prompt-editor-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}
.prompt-editor-buttons button {
  padding: 8px 16px;
  border-radius: 999px;
}
.prompt-editor-buttons .primary-button:disabled {
  opacity: 0.45;
  cursor: default;
}
.prompt-editor-note {
  margin: 6px 4px 0;
  font-size: 12px;
}
:root[data-theme='dark'] .prompt-editor {
  background: #1f1f1f;
  border-color: #5c4d2c;
}
:root[data-theme='dark'] .prompt-editor-text {
  color: #e7e6e3;
}
.user-actions[hidden],
.user-message[hidden] {
  display: none;
}
/* The editor takes the full message width while open. */
.user-column:has(.prompt-editor) {
  flex: 1;
  min-width: 0;
}

/* Compact sidebar menu: tighter rows for New chat, Models, My files and Memory. */
aside > nav {
  margin: 22px 0 2px;
}
#new-chat,
#open-models,
.nav-extra {
  padding: 9px 12px;
  margin: 0 0 2px;
}
body.sidebar-collapsed #new-chat,
body.sidebar-collapsed #open-models,
body.sidebar-collapsed .nav-extra {
  padding: 9px 0;
}
@media (max-width: 650px) {
  .sidebar-scroll {
    flex: none;
    overflow: visible;
  }
}

/* ADR-0016: each chat in Recents has a pin and a "…" menu, shown on hover or keyboard focus,
   and always on touch screens; a pinned chat keeps its pin showing. */
.run-item {
  display: flex;
  align-items: center;
  border-radius: 8px;
  margin-bottom: 1px;
}
.run-item:hover,
.run-item:focus-within,
.run-item.menu-open,
.run-item:has(.run-row[aria-current='true']) {
  background: #f4efe4;
}
.run-item .run-row,
.run-item .run-row:hover,
.run-item .run-row[aria-current='true'] {
  flex: 1;
  min-width: 0;
  margin: 0;
  background: transparent;
}
.run-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 1px;
  padding-right: 4px;
}
.run-action {
  display: none;
  width: 26px;
  height: 26px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: transparent;
  color: #57544e;
}
.run-action:hover {
  background: #e9dfc9;
  color: #1f1f1f;
}
.run-item:hover .run-action,
.run-item:focus-within .run-action,
.run-item.menu-open .run-action,
.run-item.pinned .run-pin {
  display: inline-flex;
}
.run-pin[aria-pressed='true'] {
  color: #1f1f1f;
}
.run-pin[aria-pressed='true'] svg {
  fill: #d4a017;
}
@media (hover: none) {
  .run-action {
    display: inline-flex;
  }
}
.run-menu {
  position: fixed;
  z-index: 40;
  min-width: 200px;
  padding: 6px;
  border: 1px solid #e7e6e4;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 40px #14131226;
}
.run-menu hr {
  margin: 6px 0;
  border: 0;
  border-top: 1px solid #efeeec;
}
.run-menu .run-menu-delete {
  color: #c2412d;
}
.run-menu .run-menu-delete:hover,
.run-menu .run-menu-delete:focus-visible {
  background: #fbebe7;
}
.rename-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 22px 24px 20px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  color: #1f1f1f;
  box-shadow: 0 24px 64px #0000003d;
}
.rename-dialog::backdrop {
  background: #14131280;
}
.rename-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.rename-head h2 {
  font-size: 18px;
  font-weight: 600;
}
.rename-head p {
  margin: 6px 0 16px;
  font-size: 13px;
}
#rename-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d4a017;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  outline: none;
}
#rename-input:focus {
  box-shadow: 0 0 0 3px #d4a01740;
}
.rename-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.rename-buttons button {
  border-radius: 999px;
}
#rename-save:disabled {
  opacity: 0.45;
  cursor: default;
}
.archived-list {
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
}
.archived-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0 8px 12px;
  font-size: 13px;
}
.archived-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.archived-item .secondary-button {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 12px;
}
:root[data-theme='dark'] .run-item:hover,
:root[data-theme='dark'] .run-item:focus-within,
:root[data-theme='dark'] .run-item.menu-open,
:root[data-theme='dark'] .run-item:has(.run-row[aria-current='true']) {
  background: #2a2a2a;
}
:root[data-theme='dark'] .run-item .run-row {
  background: transparent;
}
:root[data-theme='dark'] .run-action {
  color: #bdbab4;
}
:root[data-theme='dark'] .run-action:hover {
  background: #3a3122;
  color: #efe2c4;
}
:root[data-theme='dark'] .run-menu,
:root[data-theme='dark'] .rename-dialog {
  background: #1f1f1f;
  border-color: #363430;
  color: #e7e6e3;
}
:root[data-theme='dark'] .run-menu hr {
  border-color: #363430;
}
:root[data-theme='dark'] .run-menu .run-menu-delete {
  color: #f08a76;
}
:root[data-theme='dark'] .run-menu .run-menu-delete:hover,
:root[data-theme='dark'] .run-menu .run-menu-delete:focus-visible {
  background: #3a2420;
}

/* ADR-0016: the Pinned area under the menu, styled like the Recents heading. */
.pinned-section {
  margin-top: 14px;
}
.pinned-heading {
  margin: 0 0 6px;
  padding: 4px 0;
}
.pinned-heading h2 {
  font-size: 12px;
  color: #817c73;
}
#toggle-pinned {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: #817c73;
  padding: 6px 8px;
  border-radius: 7px;
}
#toggle-pinned:hover {
  background: #f4efe4;
}
#toggle-pinned .chevron {
  transition: transform 0.15s ease;
}
#toggle-pinned[aria-expanded='false'] .chevron {
  transform: rotate(-90deg);
}
body.sidebar-collapsed #pinned {
  display: none !important;
}
:root[data-theme='dark'] .pinned-heading h2,
:root[data-theme='dark'] #toggle-pinned {
  color: #a4a099;
}
:root[data-theme='dark'] #toggle-pinned:hover {
  background: #2a2a2a;
  color: #efe2c4;
}
/* Inside Pinned every chat is pinned, so its pin shows only on hover, like the "…" button. */
@media (hover: hover) {
  #pinned .run-item:not(:hover):not(:focus-within):not(.menu-open) .run-pin {
    display: none;
  }
}

/* ADR-0017: the owner's pilot cost report in Settings. */
.cost-actions {
  display: flex;
  gap: 8px;
  margin: 12px 0 16px;
}
.cost-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.cost-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #e7e6e4;
  border-radius: 10px;
}
.cost-card small {
  font-size: 11px;
  color: #7c7871;
}
.cost-card strong {
  font-size: 15px;
}
.cost-table-wrap {
  overflow-x: auto;
  margin-bottom: 16px;
}
.cost-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.cost-table caption {
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  padding-bottom: 6px;
}
.cost-table th,
.cost-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #efeeec;
  text-align: left;
  white-space: nowrap;
}
.cost-table th {
  color: #7c7871;
  font-weight: 600;
}
.cost-note {
  font-size: 12px;
  line-height: 1.6;
}
:root[data-theme='dark'] .cost-card,
:root[data-theme='dark'] .cost-table th,
:root[data-theme='dark'] .cost-table td {
  border-color: #363430;
}
/* Cost report in brand v1.1: pastel Muted Gold tints for cards, buttons and table headings. */
.cost-card {
  background: #faf6ee;
  border-color: #ece2cc;
}
.cost-card:first-child {
  background: #f4efe4;
}
.cost-actions .secondary-button {
  background: #f4efe4;
  border-color: #e8dcc2;
  color: #1f1f1f;
  font-weight: 500;
}
.cost-actions .secondary-button:hover:not(:disabled) {
  background: #ede3cc;
  border-color: #d4a017;
}
.cost-actions .secondary-button:disabled {
  opacity: 0.55;
  cursor: default;
}
.cost-table-wrap {
  border: 1px solid #ece2cc;
  border-radius: 10px;
  background: #fffdf9;
}
.cost-table caption {
  padding: 10px 12px 8px;
  background: #faf6ee;
  border-bottom: 1px solid #ece2cc;
}
.cost-table th {
  background: #f8f3e8;
  color: #6b5a33;
}
.cost-table tr:last-child td {
  border-bottom: 0;
}
.cost-table tr:hover td {
  background: #fbf8f1;
}
:root[data-theme='dark'] .cost-card {
  background: #24211b;
  border-color: #3a3122;
}
:root[data-theme='dark'] .cost-card:first-child {
  background: #2b2620;
}
:root[data-theme='dark'] .cost-card small {
  color: #bfae86;
}
:root[data-theme='dark'] .cost-actions .secondary-button {
  background: #2b2620;
  border-color: #4a3f2b;
  color: #efe2c4;
}
:root[data-theme='dark'] .cost-actions .secondary-button:hover:not(:disabled) {
  background: #3a3122;
  border-color: #8f7840;
}
:root[data-theme='dark'] .cost-table-wrap {
  background: #1c1a17;
  border-color: #3a3122;
}
:root[data-theme='dark'] .cost-table caption {
  background: #24211b;
  border-color: #3a3122;
}
:root[data-theme='dark'] .cost-table th {
  background: #2b2620;
  color: #d9c08a;
}
:root[data-theme='dark'] .cost-table tr:hover td {
  background: #24211b;
}

/* Wider Settings so the cost report's cards and tables fit on one line each. */
.settings-dialog {
  width: min(1080px, calc(100vw - 32px));
  height: min(720px, calc(100dvh - 32px));
}
.cost-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cost-card small,
.cost-card strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cost-table th.num,
.cost-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
  .cost-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ADR-0008 amendment (2026-10-10): the owner's Members panel, in brand v1.1 pastel gold. */
.tab-badge {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #d4a017;
  color: #1f1f1f;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.members-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 6px;
}
.members-filters {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid #ece2cc;
  border-radius: 999px;
  background: #faf6ee;
}
.members-filter {
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  color: #57544e;
  font-size: 12px;
}
.members-filter[aria-pressed='true'] {
  background: #fff;
  color: #1f1f1f;
  font-weight: 600;
  box-shadow: 0 1px 3px #1413121a;
}
#members-search,
#customers-search {
  flex: 1;
  min-width: 160px;
  padding: 8px 12px;
  border: 1px solid #e8dcc2;
  border-radius: 999px;
  background: #fffdf9;
  color: inherit;
  font: inherit;
  font-size: 13px;
}
#members-refresh {
  background: #f4efe4;
  border-color: #e8dcc2;
}
.members-list {
  border: 1px solid #ece2cc;
  border-radius: 12px;
  background: #fffdf9;
  overflow: hidden;
}
.members-list > p {
  margin: 0;
  padding: 18px;
}
.member-row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) 120px minmax(0, 1.3fr) 190px;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid #efe7d6;
}
.member-row:last-child {
  border-bottom: 0;
}
.member-row:hover {
  background: #fbf8f1;
}
.member-who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.member-avatar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1f1f1f;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.member-names {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.member-names strong,
.member-names small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-names strong {
  font-size: 13px;
}
.member-names small,
.member-dates small {
  font-size: 11.5px;
}
.member-dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.member-badge {
  justify-self: start;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.member-badge.owner {
  background: #1f1f1f;
  color: #fff;
}
.member-badge.approved {
  background: #f3ead6;
  color: #5c4d2c;
}
.member-badge.pending {
  background: #fff;
  border: 1px solid #d4a017;
  color: #8a6d2f;
}
.member-badge.suspended {
  background: #efeeec;
  color: #6b6862;
}
.member-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.member-actions button {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
}
.member-actions .secondary-button {
  background: #f4efe4;
  border-color: #e8dcc2;
}
.member-actions .member-remove {
  color: #c2412d;
}
.member-actions button:disabled {
  opacity: 0.5;
}
@media (max-width: 760px) {
  .member-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .member-dates {
    display: none;
  }
  .member-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}
:root[data-theme='dark'] .members-filters,
:root[data-theme='dark'] .members-list {
  background: #1c1a17;
  border-color: #3a3122;
}
:root[data-theme='dark'] .members-filter {
  color: #bdbab4;
}
:root[data-theme='dark'] .members-filter[aria-pressed='true'] {
  background: #2b2620;
  color: #efe2c4;
}
:root[data-theme='dark'] #members-search,
:root[data-theme='dark'] #customers-search {
  background: #1c1a17;
  border-color: #4a3f2b;
}
:root[data-theme='dark'] #members-refresh,
:root[data-theme='dark'] .member-actions .secondary-button {
  background: #2b2620;
  border-color: #4a3f2b;
  color: #efe2c4;
}
:root[data-theme='dark'] .member-row {
  border-color: #2e2a23;
}
:root[data-theme='dark'] .member-row:hover {
  background: #24211b;
}
:root[data-theme='dark'] .member-avatar,
:root[data-theme='dark'] .member-badge.owner {
  background: #d4a017;
  color: #1f1f1f;
}
:root[data-theme='dark'] .member-badge.approved {
  background: #3a3122;
  color: #efe2c4;
}
:root[data-theme='dark'] .member-badge.pending {
  background: transparent;
  color: #d9c08a;
}
:root[data-theme='dark'] .member-badge.suspended {
  background: #2a2a2a;
  color: #a4a099;
}
:root[data-theme='dark'] .member-actions .member-remove {
  color: #f08a76;
}

/* Brand v1.1 dialog pattern (docs/brand/README.md, "Workspace UI pattern"): pastel gold header
   and footer, rounded cream panels for lists, charcoal primary and gold-tint secondary pills.
   Applies to Customize AI, My files and Memory. */
.customize-head {
  background: #faf6ee;
  border-bottom-color: #ece2cc;
}
.customize-foot {
  background: #faf6ee;
  border-top-color: #ece2cc;
}
.customize-head .dialog-close {
  border-color: #e8dcc2;
  border-radius: 999px;
  background: #fff;
}
.customize-head .dialog-close:hover {
  background: #f4efe4;
  border-color: #d4a017;
}
.customize-foot .secondary-button,
.knowledge-dialog .secondary-button {
  border-color: #e8dcc2;
  border-radius: 999px;
  background: #f4efe4;
  color: #1f1f1f;
}
.customize-foot .secondary-button:hover:not(:disabled),
.knowledge-dialog .secondary-button:hover:not(:disabled) {
  background: #ede3cc;
  border-color: #d4a017;
}
.knowledge-dialog h3 {
  color: #8a6d2f;
}
.knowledge-toolbar {
  padding: 10px 10px 10px 14px;
  border: 1px solid #ece2cc;
  border-radius: 12px;
  background: #faf6ee;
}
#add-files,
#memory-save {
  border: 0;
  background: #1f1f1f;
  color: #fff;
  font-weight: 600;
}
#add-files:hover:not(:disabled),
#memory-save:hover:not(:disabled) {
  background: #3a3833;
}
.knowledge-list:not(:empty) {
  border: 1px solid #ece2cc;
  border-radius: 12px;
  background: #fffdf9;
  overflow: hidden;
}
.knowledge-item {
  padding: 10px 12px;
  border-top-color: #efe7d6;
}
.knowledge-item:hover {
  background: #fbf8f1;
}
.knowledge-empty {
  margin: 4px 0;
  padding: 18px;
  border: 1px dashed #e0d2b0;
  border-radius: 12px;
  background: #fffdf9;
  text-align: center;
}
.knowledge-list .knowledge-empty {
  margin: 0;
  border: 0;
}
.memory-switch {
  padding: 12px 14px;
  border: 1px solid #ece2cc;
  border-radius: 12px;
  background: #faf6ee;
}
.memory-switch input {
  accent-color: #d4a017;
}
.memory-add select,
.memory-add input,
.memory-edit {
  border-color: #e8dcc2;
  border-radius: 999px;
  background: #fffdf9;
  padding-left: 14px;
}
.memory-add select:focus,
.memory-add input:focus,
.memory-edit:focus {
  outline: none;
  border-color: #d4a017;
  box-shadow: 0 0 0 3px #d4a01733;
}
.memory-add button {
  border-radius: 999px;
}
#memory-clear {
  color: #c2412d;
}
#memory-clear:disabled {
  color: #c9c3b8;
}
:root[data-theme='dark'] .customize-head,
:root[data-theme='dark'] .customize-foot {
  background: #24211b;
  border-color: #3a3122;
}
:root[data-theme='dark'] .customize-head .dialog-close {
  background: #1f1f1f;
  border-color: #4a3f2b;
  color: #efe2c4;
}
:root[data-theme='dark'] .customize-foot .secondary-button,
:root[data-theme='dark'] .knowledge-dialog .secondary-button {
  background: #2b2620;
  border-color: #4a3f2b;
  color: #efe2c4;
}
:root[data-theme='dark'] .knowledge-dialog h3 {
  color: #d9c08a;
}
:root[data-theme='dark'] .knowledge-toolbar,
:root[data-theme='dark'] .memory-switch {
  background: #24211b;
  border-color: #3a3122;
}
:root[data-theme='dark'] #add-files,
:root[data-theme='dark'] #memory-save {
  background: #d4a017;
  color: #1f1f1f;
}
:root[data-theme='dark'] .knowledge-list:not(:empty),
:root[data-theme='dark'] .knowledge-empty {
  background: #1c1a17;
  border-color: #3a3122;
}
:root[data-theme='dark'] .knowledge-item {
  border-color: #2e2a23;
}
:root[data-theme='dark'] .knowledge-item:hover {
  background: #24211b;
}
:root[data-theme='dark'] .memory-add select,
:root[data-theme='dark'] .memory-add input,
:root[data-theme='dark'] .memory-edit {
  background: #1c1a17;
  border-color: #4a3f2b;
}
:root[data-theme='dark'] #memory-clear {
  color: #f08a76;
}

/* Brand confirmation dialog: replaces the browser's confirm() for deleting and lasting actions. */
.confirm-dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #fff;
  color: #1f1f1f;
  box-shadow: 0 24px 64px #0000003d;
}
.confirm-dialog::backdrop {
  background: #14131280;
}
.confirm {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 24px 20px;
  border-top: 4px solid #d4a017;
}
.confirm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: #f4efe4;
  color: #8a6d2f;
}
.confirm-dialog.danger .confirm-icon {
  background: #fbebe7;
  color: #c2412d;
}
.confirm-dialog:not(.danger) .confirm-icon svg {
  display: none;
}
.confirm-dialog:not(.danger) .confirm-icon::before {
  content: '!';
  font-weight: 800;
  font-size: 18px;
}
.confirm h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
}
.confirm p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #57544e;
  overflow-wrap: anywhere;
}
.confirm-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-self: stretch;
  margin-top: 20px;
}
.confirm-buttons button {
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px;
}
.confirm-buttons .secondary-button {
  border-color: #e8dcc2;
  background: #f4efe4;
  color: #1f1f1f;
}
.confirm-buttons .secondary-button:hover {
  background: #ede3cc;
  border-color: #d4a017;
}
.danger-button {
  border: 0;
  background: #c2412d;
  color: #fff;
  font-weight: 600;
}
.danger-button:hover {
  background: #a83725;
}
:root[data-theme='dark'] .confirm-dialog {
  background: #1f1f1f;
  color: #e7e6e3;
}
:root[data-theme='dark'] .confirm p {
  color: #bdbab4;
}
:root[data-theme='dark'] .confirm-icon {
  background: #2b2620;
  color: #d9c08a;
}
:root[data-theme='dark'] .confirm-dialog.danger .confirm-icon {
  background: #3a2420;
  color: #f08a76;
}
:root[data-theme='dark'] .confirm-buttons .secondary-button {
  background: #2b2620;
  border-color: #4a3f2b;
  color: #efe2c4;
}

/* Gradual reveal of a new answer: the card fades in, then each row is written out left to
   right, one after another; the actions fade in last. */
.reveal-card {
  animation: reveal-card 0.32s ease both;
}
@keyframes reveal-card {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.reveal-row {
  animation: reveal-row var(--reveal-duration, 0.38s) ease-out both;
  animation-delay: var(--reveal-delay, 0ms);
}
@keyframes reveal-row {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  15% {
    opacity: 1;
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}
.reveal-fade {
  animation-name: reveal-fade;
  animation-duration: 0.3s;
}
@keyframes reveal-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Brand v3.0: the working indicator is the gold flare (owner, 2026-10-12). Its three stripes ripple
   slowly like a wave; then the bottom stripe turns once clockwise in place, the middle follows,
   then the top; once all are back in place it rests 2.5 s before the next wave (8.1 s a loop).
   Each stripe is drawn on the whole flare's canvas and turns about its own centre, so at rest
   they form the flare exactly. */
.flare-loader {
  position: relative;
  display: inline-block;
  flex: none;
  height: 13px;
  aspect-ratio: 231 / 160;
}
.flare-stripe {
  position: absolute;
  inset: 0;
  background: center / contain no-repeat;
  animation: 8.1s linear infinite;
  will-change: transform;
}
.flare-stripe-1 {
  background-image: url('brand/flare-stripe-1.png');
  transform-origin: 54.29% 19.38%;
  animation-name: flare-stripe-1;
}
.flare-stripe-2 {
  background-image: url('brand/flare-stripe-2.png');
  transform-origin: 43.33% 49.44%;
  animation-name: flare-stripe-2;
}
.flare-stripe-3 {
  background-image: url('brand/flare-stripe-3.png');
  transform-origin: 39.83% 80.12%;
  animation-name: flare-stripe-3;
}
@keyframes flare-stripe-1 {
  0% {
    transform: translate(0%, 0%) rotate(0deg);
    animation-timing-function: linear;
  }
  1.23% {
    transform: translate(0.36%, -0.41%) rotate(0deg);
    animation-timing-function: linear;
  }
  2.47% {
    transform: translate(0.55%, -1.52%) rotate(0deg);
    animation-timing-function: linear;
  }
  3.7% {
    transform: translate(0.44%, -2.95%) rotate(0deg);
    animation-timing-function: linear;
  }
  4.94% {
    transform: translate(0%, -4.21%) rotate(0deg);
    animation-timing-function: linear;
  }
  6.17% {
    transform: translate(-0.72%, -4.79%) rotate(0deg);
    animation-timing-function: linear;
  }
  7.41% {
    transform: translate(-1.57%, -4.32%) rotate(0deg);
    animation-timing-function: linear;
  }
  8.64% {
    transform: translate(-2.34%, -2.67%) rotate(0deg);
    animation-timing-function: linear;
  }
  9.88% {
    transform: translate(-2.83%, 0%) rotate(0deg);
    animation-timing-function: linear;
  }
  11.11% {
    transform: translate(-2.86%, 3.25%) rotate(0deg);
    animation-timing-function: linear;
  }
  12.35% {
    transform: translate(-2.35%, 6.47%) rotate(0deg);
    animation-timing-function: linear;
  }
  13.58% {
    transform: translate(-1.35%, 8.96%) rotate(0deg);
    animation-timing-function: linear;
  }
  14.81% {
    transform: translate(0%, 10.16%) rotate(0deg);
    animation-timing-function: linear;
  }
  16.05% {
    transform: translate(1.46%, 9.73%) rotate(0deg);
    animation-timing-function: linear;
  }
  17.28% {
    transform: translate(2.77%, 7.63%) rotate(0deg);
    animation-timing-function: linear;
  }
  18.52% {
    transform: translate(3.68%, 4.19%) rotate(0deg);
    animation-timing-function: linear;
  }
  19.75% {
    transform: translate(4%, 0%) rotate(0deg);
    animation-timing-function: linear;
  }
  20.99% {
    transform: translate(3.68%, -4.19%) rotate(0deg);
    animation-timing-function: linear;
  }
  22.22% {
    transform: translate(2.77%, -7.63%) rotate(0deg);
    animation-timing-function: linear;
  }
  23.46% {
    transform: translate(1.46%, -9.73%) rotate(0deg);
    animation-timing-function: linear;
  }
  24.69% {
    transform: translate(0%, -10.16%) rotate(0deg);
    animation-timing-function: linear;
  }
  25.93% {
    transform: translate(-1.35%, -8.96%) rotate(0deg);
    animation-timing-function: linear;
  }
  27.16% {
    transform: translate(-2.35%, -6.47%) rotate(0deg);
    animation-timing-function: linear;
  }
  28.4% {
    transform: translate(-2.86%, -3.25%) rotate(0deg);
    animation-timing-function: linear;
  }
  29.63% {
    transform: translate(-2.83%, 0%) rotate(0deg);
    animation-timing-function: linear;
  }
  30.86% {
    transform: translate(-2.34%, 2.67%) rotate(0deg);
    animation-timing-function: linear;
  }
  32.1% {
    transform: translate(-1.57%, 4.32%) rotate(0deg);
    animation-timing-function: linear;
  }
  33.33% {
    transform: translate(-0.72%, 4.79%) rotate(0deg);
    animation-timing-function: linear;
  }
  34.57% {
    transform: translate(0%, 4.21%) rotate(0deg);
    animation-timing-function: linear;
  }
  35.8% {
    transform: translate(0.44%, 2.95%) rotate(0deg);
    animation-timing-function: linear;
  }
  37.04% {
    transform: translate(0.55%, 1.52%) rotate(0deg);
    animation-timing-function: linear;
  }
  38.27% {
    transform: translate(0.36%, 0.41%) rotate(0deg);
    animation-timing-function: linear;
  }
  39.51% {
    transform: translate(0%, 0%) rotate(0deg);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  54.32% {
    transform: translate(0%, 0%) rotate(0deg);
    animation-timing-function: linear;
  }
  69.14% {
    transform: translate(0%, 0%) rotate(360deg);
    animation-timing-function: linear;
  }
  100% {
    transform: translate(0%, 0%) rotate(360deg);
    animation-timing-function: linear;
  }
}
@keyframes flare-stripe-2 {
  0% {
    transform: translate(0%, 0%) rotate(0deg);
    animation-timing-function: linear;
  }
  1.23% {
    transform: translate(0.33%, 0.6%) rotate(0deg);
    animation-timing-function: linear;
  }
  2.47% {
    transform: translate(0.77%, 0.42%) rotate(0deg);
    animation-timing-function: linear;
  }
  3.7% {
    transform: translate(1.14%, -0.62%) rotate(0deg);
    animation-timing-function: linear;
  }
  4.94% {
    transform: translate(1.27%, -2.34%) rotate(0deg);
    animation-timing-function: linear;
  }
  6.17% {
    transform: translate(1.05%, -4.31%) rotate(0deg);
    animation-timing-function: linear;
  }
  7.41% {
    transform: translate(0.43%, -5.99%) rotate(0deg);
    animation-timing-function: linear;
  }
  8.64% {
    transform: translate(-0.5%, -6.84%) rotate(0deg);
    animation-timing-function: linear;
  }
  9.88% {
    transform: translate(-1.57%, -6.47%) rotate(0deg);
    animation-timing-function: linear;
  }
  11.11% {
    transform: translate(-2.57%, -4.72%) rotate(0deg);
    animation-timing-function: linear;
  }
  12.35% {
    transform: translate(-3.26%, -1.78%) rotate(0deg);
    animation-timing-function: linear;
  }
  13.58% {
    transform: translate(-3.46%, 1.89%) rotate(0deg);
    animation-timing-function: linear;
  }
  14.81% {
    transform: translate(-3.07%, 5.65%) rotate(0deg);
    animation-timing-function: linear;
  }
  16.05% {
    transform: translate(-2.13%, 8.75%) rotate(0deg);
    animation-timing-function: linear;
  }
  17.28% {
    transform: translate(-0.77%, 10.58%) rotate(0deg);
    animation-timing-function: linear;
  }
  18.52% {
    transform: translate(0.78%, 10.74%) rotate(0deg);
    animation-timing-function: linear;
  }
  19.75% {
    transform: translate(2.22%, 9.15%) rotate(0deg);
    animation-timing-function: linear;
  }
  20.99% {
    transform: translate(3.31%, 6.08%) rotate(0deg);
    animation-timing-function: linear;
  }
  22.22% {
    transform: translate(3.85%, 2.1%) rotate(0deg);
    animation-timing-function: linear;
  }
  23.46% {
    transform: translate(3.75%, -2.05%) rotate(0deg);
    animation-timing-function: linear;
  }
  24.69% {
    transform: translate(3.07%, -5.65%) rotate(0deg);
    animation-timing-function: linear;
  }
  25.93% {
    transform: translate(1.96%, -8.07%) rotate(0deg);
    animation-timing-function: linear;
  }
  27.16% {
    transform: translate(0.65%, -8.97%) rotate(0deg);
    animation-timing-function: linear;
  }
  28.4% {
    transform: translate(-0.6%, -8.34%) rotate(0deg);
    animation-timing-function: linear;
  }
  29.63% {
    transform: translate(-1.57%, -6.47%) rotate(0deg);
    animation-timing-function: linear;
  }
  30.86% {
    transform: translate(-2.11%, -3.88%) rotate(0deg);
    animation-timing-function: linear;
  }
  32.1% {
    transform: translate(-2.18%, -1.19%) rotate(0deg);
    animation-timing-function: linear;
  }
  33.33% {
    transform: translate(-1.85%, 1.01%) rotate(0deg);
    animation-timing-function: linear;
  }
  34.57% {
    transform: translate(-1.27%, 2.34%) rotate(0deg);
    animation-timing-function: linear;
  }
  35.8% {
    transform: translate(-0.65%, 2.65%) rotate(0deg);
    animation-timing-function: linear;
  }
  37.04% {
    transform: translate(-0.15%, 2.1%) rotate(0deg);
    animation-timing-function: linear;
  }
  38.27% {
    transform: translate(0.08%, 1.06%) rotate(0deg);
    animation-timing-function: linear;
  }
  39.51% {
    transform: translate(0%, 0%) rotate(0deg);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  48.15% {
    transform: translate(0%, 0%) rotate(0deg);
    animation-timing-function: linear;
  }
  62.96% {
    transform: translate(0%, 0%) rotate(360deg);
    animation-timing-function: linear;
  }
  100% {
    transform: translate(0%, 0%) rotate(360deg);
    animation-timing-function: linear;
  }
}
@keyframes flare-stripe-3 {
  0% {
    transform: translate(0%, 0%) rotate(0deg);
    animation-timing-function: linear;
  }
  1.23% {
    transform: translate(0%, 1.08%) rotate(0deg);
    animation-timing-function: linear;
  }
  2.47% {
    transform: translate(0.3%, 1.98%) rotate(0deg);
    animation-timing-function: linear;
  }
  3.7% {
    transform: translate(0.82%, 2.26%) rotate(0deg);
    animation-timing-function: linear;
  }
  4.94% {
    transform: translate(1.41%, 1.61%) rotate(0deg);
    animation-timing-function: linear;
  }
  6.17% {
    transform: translate(1.89%, 0%) rotate(0deg);
    animation-timing-function: linear;
  }
  7.41% {
    transform: translate(2.05%, -2.34%) rotate(0deg);
    animation-timing-function: linear;
  }
  8.64% {
    transform: translate(1.79%, -4.93%) rotate(0deg);
    animation-timing-function: linear;
  }
  9.88% {
    transform: translate(1.08%, -7.19%) rotate(0deg);
    animation-timing-function: linear;
  }
  11.11% {
    transform: translate(0%, -8.5%) rotate(0deg);
    animation-timing-function: linear;
  }
  12.35% {
    transform: translate(-1.27%, -8.45%) rotate(0deg);
    animation-timing-function: linear;
  }
  13.58% {
    transform: translate(-2.49%, -6.86%) rotate(0deg);
    animation-timing-function: linear;
  }
  14.81% {
    transform: translate(-3.41%, -3.89%) rotate(0deg);
    animation-timing-function: linear;
  }
  16.05% {
    transform: translate(-3.83%, 0%) rotate(0deg);
    animation-timing-function: linear;
  }
  17.28% {
    transform: translate(-3.62%, 4.13%) rotate(0deg);
    animation-timing-function: linear;
  }
  18.52% {
    transform: translate(-2.81%, 7.74%) rotate(0deg);
    animation-timing-function: linear;
  }
  19.75% {
    transform: translate(-1.53%, 10.16%) rotate(0deg);
    animation-timing-function: linear;
  }
  20.99% {
    transform: translate(0%, 10.95%) rotate(0deg);
    animation-timing-function: linear;
  }
  22.22% {
    transform: translate(1.5%, 9.97%) rotate(0deg);
    animation-timing-function: linear;
  }
  23.46% {
    transform: translate(2.71%, 7.44%) rotate(0deg);
    animation-timing-function: linear;
  }
  24.69% {
    transform: translate(3.41%, 3.89%) rotate(0deg);
    animation-timing-function: linear;
  }
  25.93% {
    transform: translate(3.53%, 0%) rotate(0deg);
    animation-timing-function: linear;
  }
  27.16% {
    transform: translate(3.07%, -3.5%) rotate(0deg);
    animation-timing-function: linear;
  }
  28.4% {
    transform: translate(2.19%, -6.01%) rotate(0deg);
    animation-timing-function: linear;
  }
  29.63% {
    transform: translate(1.08%, -7.19%) rotate(0deg);
    animation-timing-function: linear;
  }
  30.86% {
    transform: translate(0%, -6.98%) rotate(0deg);
    animation-timing-function: linear;
  }
  32.1% {
    transform: translate(-0.85%, -5.65%) rotate(0deg);
    animation-timing-function: linear;
  }
  33.33% {
    transform: translate(-1.33%, -3.67%) rotate(0deg);
    animation-timing-function: linear;
  }
  34.57% {
    transform: translate(-1.41%, -1.61%) rotate(0deg);
    animation-timing-function: linear;
  }
  35.8% {
    transform: translate(-1.16%, 0%) rotate(0deg);
    animation-timing-function: linear;
  }
  37.04% {
    transform: translate(-0.72%, 0.82%) rotate(0deg);
    animation-timing-function: linear;
  }
  38.27% {
    transform: translate(-0.28%, 0.76%) rotate(0deg);
    animation-timing-function: linear;
  }
  39.51% {
    transform: translate(0%, 0%) rotate(0deg);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  41.98% {
    transform: translate(0%, 0%) rotate(0deg);
    animation-timing-function: linear;
  }
  56.79% {
    transform: translate(0%, 0%) rotate(360deg);
    animation-timing-function: linear;
  }
  100% {
    transform: translate(0%, 0%) rotate(360deg);
    animation-timing-function: linear;
  }
}
.thinking-flare {
  height: 13px;
  margin: 8px 6px;
}
.plan-flare {
  height: 9px;
}
.reveal-progress {
  display: flex;
  padding: 10px 4px 4px;
  transition: opacity 0.3s ease;
}
.reveal-progress.done {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-card,
  .reveal-row,
  .flare-stripe {
    animation: none;
  }
}

/* Web sources: collapsed under their heading until clicked; inline [n] numbers link to the pages. */
details.web-sources > summary.sources-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  list-style: none;
  cursor: pointer;
}
details.web-sources > summary.sources-title::-webkit-details-marker {
  display: none;
}
details.web-sources > summary.sources-title::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-right: 2px solid #8a6d2f;
  border-bottom: 2px solid #8a6d2f;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
details.web-sources[open] > summary.sources-title::after {
  transform: rotate(45deg);
}
details.web-sources[open] > summary.sources-title {
  margin-bottom: 8px;
}
details.web-sources > summary.sources-title:hover {
  color: #8a6d2f;
}
.cite-link {
  color: #8a6d2f;
  font-weight: 600;
  text-decoration: none;
}
.cite-link:hover {
  text-decoration: underline;
}
:root[data-theme='dark'] details.web-sources > summary.sources-title::after {
  border-color: #d9c08a;
}
:root[data-theme='dark'] .cite-link,
:root[data-theme='dark'] details.web-sources > summary.sources-title:hover {
  color: #d9c08a;
}

/* ADR-0017 (Phase 6 item 4): inviting people and changing roles, brand v1.1 pattern. */
.invite-box {
  margin: 14px 0 6px;
  padding: 12px 14px;
  border: 1px solid #ece2cc;
  border-radius: 12px;
  background: #faf6ee;
}
.invite-label,
.members-section-label {
  display: block;
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #8a6d2f;
}
.members-section-label {
  margin: 18px 0 6px;
}
.invite-row {
  display: flex;
  gap: 8px;
}
#invite-email {
  flex: 1;
  min-width: 0;
}
#invite-email,
#invite-role,
.member-role {
  padding: 8px 12px;
  border: 1px solid #e8dcc2;
  border-radius: 999px;
  background: #fffdf9;
  color: #1f1f1f;
  font: inherit;
  font-size: 13px;
}
#invite-email:focus,
#invite-role:focus,
.member-role:focus {
  outline: none;
  border-color: #d4a017;
  box-shadow: 0 0 0 3px #d4a01733;
}
#invite-send {
  padding: 8px 18px;
  border-radius: 999px;
}
.invite-hint {
  margin: 8px 2px 0;
  font-size: 12px;
  line-height: 1.5;
}
.member-row {
  grid-template-columns: minmax(0, 2.2fr) 120px minmax(0, 1.3fr) 270px;
}
.member-role {
  padding: 5px 10px;
  font-size: 12px;
}
.invitation-avatar {
  background: #f3ead6;
  color: #8a6d2f;
}
@media (max-width: 760px) {
  .invite-row {
    flex-wrap: wrap;
  }
  #invite-email {
    flex-basis: 100%;
  }
}
:root[data-theme='dark'] .invite-box {
  background: #24211b;
  border-color: #3a3122;
}
:root[data-theme='dark'] .invite-label,
:root[data-theme='dark'] .members-section-label {
  color: #d9c08a;
}
:root[data-theme='dark'] #invite-email,
:root[data-theme='dark'] #invite-role,
:root[data-theme='dark'] .member-role {
  background: #1c1a17;
  border-color: #4a3f2b;
  color: #efe2c4;
}
:root[data-theme='dark'] .invitation-avatar {
  background: #3a3122;
  color: #d9c08a;
}
.member-row {
  grid-template-columns: minmax(0, 1fr) 110px 165px 260px;
}
.member-dates small {
  white-space: nowrap;
}
@media (max-width: 760px) {
  .member-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* Invite result inside the invite box. */
.invite-status {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.5;
}
.invite-status.done {
  background: #f3ead6;
  border: 1px solid #d4a017;
  color: #5c4d2c;
}
.invite-status.working {
  background: #fffdf9;
  border: 1px solid #ece2cc;
  color: #6b6862;
}
.invite-status.error {
  background: #fbebe7;
  border: 1px solid #efc2b8;
  color: #a83725;
}
:root[data-theme='dark'] .invite-status.done {
  background: #3a3122;
  border-color: #8f7840;
  color: #efe2c4;
}
:root[data-theme='dark'] .invite-status.working {
  background: #1c1a17;
  border-color: #3a3122;
  color: #bdbab4;
}
:root[data-theme='dark'] .invite-status.error {
  background: #3a2420;
  border-color: #6b3328;
  color: #f08a76;
}

/* Invitations menu: send buttons, template editor and preview (brand v1.1 pattern). */
.members-invite-link {
  display: flex;
  justify-content: flex-end;
  margin: 12px 0 -4px;
}
.members-invite-link .secondary-button {
  border-color: #e8dcc2;
  border-radius: 999px;
  background: #f4efe4;
  padding: 7px 16px;
}
.invitation-row {
  grid-template-columns: minmax(0, 1fr) auto;
}
.invitation-actions {
  flex-wrap: wrap;
}
.invitation-actions .primary-button {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
}
.invite-status-send {
  margin-left: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
}
.template-box {
  padding: 12px 14px;
  border: 1px solid #ece2cc;
  border-radius: 12px;
  background: #faf6ee;
}
.template-label {
  display: block;
  margin: 4px 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: #57544e;
}
#template-subject,
#template-body {
  width: 100%;
  margin-bottom: 10px;
  padding: 9px 12px;
  border: 1px solid #e8dcc2;
  border-radius: 10px;
  background: #fffdf9;
  color: #1f1f1f;
  font: inherit;
  font-size: 13px;
}
#template-subject {
  border-radius: 999px;
}
#template-body {
  min-height: 200px;
  line-height: 1.6;
  resize: vertical;
}
#template-subject:focus,
#template-body:focus {
  outline: none;
  border-color: #d4a017;
  box-shadow: 0 0 0 3px #d4a01733;
}
.template-placeholders {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
#template-placeholders {
  display: contents;
}
.template-chip {
  padding: 3px 10px;
  border: 1px solid #e0d2b0;
  border-radius: 999px;
  background: #fff;
  color: #8a6d2f;
  font:
    600 11.5px/1.4 ui-monospace,
    monospace;
}
.template-chip:hover {
  background: #f4efe4;
  border-color: #d4a017;
}
.template-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.template-actions button {
  padding: 8px 16px;
  border-radius: 999px;
}
.template-actions .secondary-button {
  border-color: #e8dcc2;
  background: #f4efe4;
}
.template-actions button:disabled {
  opacity: 0.5;
  cursor: default;
}
.template-preview {
  padding: 14px 16px;
  border: 1px solid #ece2cc;
  border-radius: 12px;
  background: #fffdf9;
}
.template-preview-subject {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #efe7d6;
  font-weight: 600;
  font-size: 14px;
}
.template-preview-body {
  margin: 0;
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.6;
  color: #3a3833;
  overflow-wrap: anywhere;
}
:root[data-theme='dark'] .members-invite-link .secondary-button,
:root[data-theme='dark'] .template-actions .secondary-button {
  background: #2b2620;
  border-color: #4a3f2b;
  color: #efe2c4;
}
:root[data-theme='dark'] .template-box {
  background: #24211b;
  border-color: #3a3122;
}
:root[data-theme='dark'] .template-label {
  color: #bdbab4;
}
:root[data-theme='dark'] #template-subject,
:root[data-theme='dark'] #template-body {
  background: #1c1a17;
  border-color: #4a3f2b;
  color: #efe2c4;
}
:root[data-theme='dark'] .template-chip {
  background: #1c1a17;
  border-color: #4a3f2b;
  color: #d9c08a;
}
:root[data-theme='dark'] .template-preview {
  background: #1c1a17;
  border-color: #3a3122;
}
:root[data-theme='dark'] .template-preview-subject {
  border-color: #3a3122;
}
:root[data-theme='dark'] .template-preview-body {
  color: #d6d3cd;
}

/* Branded invitation email preview. */
.template-preview-note {
  margin: -2px 0 8px;
  font-size: 12px;
  line-height: 1.5;
}
.template-preview {
  padding: 0;
  overflow: hidden;
}
.template-preview-subject {
  margin: 0;
  padding: 10px 16px;
  border-bottom: 1px solid #efe7d6;
  background: #fffdf9;
}
.template-preview-frame {
  display: block;
  width: 100%;
  height: 520px;
  border: 0;
  background: #f6f1e6;
}

/* ADR-0019: Create image switch and generated images (brand v1.1 pattern). */
#create-image {
  position: static;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-bottom: 2px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #1f1f1f;
}
#create-image[hidden] {
  display: none;
}
#create-image:hover:not(:disabled) {
  background: #f4efe4;
}
#create-image[aria-pressed='true'] {
  background: #f3ead6;
  box-shadow: inset 0 0 0 1px #d4a017;
}
.generated-image {
  margin: 12px 0 4px;
}
.generated-image-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  max-width: 560px;
  overflow: hidden;
  border: 1px solid #ece2cc;
  border-radius: 14px;
  background: #faf6ee;
}
.generated-image-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.generated-image-loading,
.generated-image-expired {
  margin: 0;
  padding: 18px;
  font-size: 13px;
}
.generated-image-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 560px;
  margin-top: 8px;
  font-size: 12px;
}
.generated-image-caption .secondary-button {
  padding: 6px 14px;
  border-color: #e8dcc2;
  border-radius: 999px;
  background: #f4efe4;
  font-size: 12px;
}
:root[data-theme='dark'] #create-image {
  color: #d9c08a;
}
:root[data-theme='dark'] #create-image:hover:not(:disabled) {
  background: #2a2a2a;
}
:root[data-theme='dark'] #create-image[aria-pressed='true'] {
  background: #3a3122;
  color: #efe2c4;
  box-shadow: inset 0 0 0 1px #8f7840;
}
:root[data-theme='dark'] .generated-image-frame {
  background: #24211b;
  border-color: #3a3122;
}
:root[data-theme='dark'] .generated-image-caption .secondary-button {
  background: #2b2620;
  border-color: #4a3f2b;
  color: #efe2c4;
}

/* ADR-0017 (Phase 6 items 11–12): waitlist request, plan and usage (brand v1.1 pattern). */
.waitlist-card {
  max-width: 560px;
  margin: 48px auto 24px;
  padding: 26px 28px;
  border: 1px solid #ece2cc;
  border-radius: 18px;
  background: #fffdf9;
  box-shadow: 0 8px 28px rgba(31, 31, 31, 0.06);
}
.waitlist-card[hidden] {
  display: none;
}
.waitlist-label {
  margin: 0 0 6px;
  color: #8a6d2f;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.waitlist-card h2 {
  margin: 0 0 8px;
  font-family: Poppins, 'Source Sans 3', sans-serif;
  font-size: 22px;
}
.waitlist-form {
  margin-top: 18px;
}
.waitlist-form[hidden] {
  display: none;
}
.waitlist-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.waitlist-row input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 10px 16px;
  border: 1px solid #e8dcc2;
  border-radius: 999px;
  background: #fffdf9;
  font: inherit;
}
.waitlist-row input:focus {
  outline: none;
  border-color: #d4a017;
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.25);
}
.waitlist-status {
  margin: 14px 0 0;
  font-size: 13px;
}
.waitlist-status:empty {
  display: none;
}
.waitlist-status.done {
  padding: 10px 14px;
  border: 1px solid #ece2cc;
  border-radius: 12px;
  background: #faf6ee;
}
.plan-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 16px;
}
.plan-feature {
  padding: 5px 12px;
  border: 1px solid #ece2cc;
  border-radius: 999px;
  background: #fffdf9;
  color: #8a8a8a;
  font-size: 12px;
}
.plan-feature.on {
  border-color: #e8dcc2;
  background: #f4efe4;
  color: #1f1f1f;
}
.plan-note {
  padding: 10px 14px;
  border: 1px solid #ece2cc;
  border-radius: 12px;
  background: #faf6ee;
  font-size: 13px;
}
:root[data-theme='dark'] .waitlist-card {
  background: #1c1a17;
  border-color: #3a3122;
  box-shadow: none;
}
:root[data-theme='dark'] .waitlist-label {
  color: #d9c08a;
}
:root[data-theme='dark'] .waitlist-row input {
  background: #1c1a17;
  border-color: #4a3f2b;
  color: #efe2c4;
}
:root[data-theme='dark'] .waitlist-status.done,
:root[data-theme='dark'] .plan-note {
  background: #24211b;
  border-color: #3a3122;
}
:root[data-theme='dark'] .plan-feature {
  background: #1c1a17;
  border-color: #3a3122;
  color: #8f8a80;
}
:root[data-theme='dark'] .plan-feature.on {
  background: #2b2620;
  border-color: #4a3f2b;
  color: #efe2c4;
}

/* ADR-0017 (Phase 6 item 12): workspace switcher, credits per answer, member credit limits. */
.workspace-switch {
  padding: 6px 4px 8px;
  border-bottom: 1px solid #efe7d6;
  margin-bottom: 4px;
}
.workspace-switch[hidden] {
  display: none;
}
.workspace-switch-label {
  display: block;
  padding: 2px 10px 4px;
  color: #8a6d2f;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.workspace-item {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.workspace-item span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-check {
  color: #8a6d2f;
}
.response-credits {
  margin-left: 8px;
  padding: 1px 8px;
  border: 1px solid #ece2cc;
  border-radius: 999px;
  background: #faf6ee;
  color: #6b5a33;
  font-size: 11px;
}
.member-limit {
  width: 92px;
  padding: 6px 10px;
  border: 1px solid #e8dcc2;
  border-radius: 999px;
  background: #fffdf9;
  font: inherit;
  font-size: 12px;
}
.member-limit:focus {
  outline: none;
  border-color: #d4a017;
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.25);
}
:root[data-theme='dark'] .workspace-switch {
  border-color: #3a3122;
}
:root[data-theme='dark'] .workspace-switch-label,
:root[data-theme='dark'] .workspace-check {
  color: #d9c08a;
}
:root[data-theme='dark'] .response-credits {
  background: #24211b;
  border-color: #3a3122;
  color: #d9c08a;
}
:root[data-theme='dark'] .member-limit {
  background: #1c1a17;
  border-color: #4a3f2b;
  color: #efe2c4;
}

/* ADR-0020: Recall past chats, and the learning switches in Memory (brand v1.1 pattern). */
#recall-history {
  position: static;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-bottom: 2px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #1f1f1f;
}
#recall-history[hidden] {
  display: none;
}
#recall-history:hover:not(:disabled) {
  background: #f4efe4;
}
#recall-history[aria-pressed='true'] {
  background: #eee6d2;
  color: #1d1d1d;
  box-shadow: inset 0 0 0 1px #d4a017;
}
.memory-learning {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid #ece2cc;
  border-radius: 12px;
  background: #fffdf9;
}
.memory-learning .knowledge-note {
  margin: 2px 0 10px 26px;
}
.memory-recall-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-left: 26px;
}
.memory-recall-tools[hidden] {
  display: none;
}
.source-chat {
  padding: 0;
  border: 0;
  background: none;
  color: #8a6d2f;
  font: inherit;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
:root[data-theme='dark'] #recall-history {
  color: #d9c08a;
}
:root[data-theme='dark'] #recall-history:hover:not(:disabled) {
  background: #2a2a2a;
}
:root[data-theme='dark'] #recall-history[aria-pressed='true'] {
  background: #3a3122;
  color: #efe2c4;
  box-shadow: inset 0 0 0 1px #8f7840;
}
:root[data-theme='dark'] .memory-learning {
  background: #1c1a17;
  border-color: #3a3122;
}
:root[data-theme='dark'] .source-chat {
  color: #d9c08a;
}

/* Owner request (2026-10-10): Memory and My files actions as pill buttons (brand v1.1 pattern). */
.knowledge-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.memory-button {
  padding: 6px 14px;
  border: 1px solid #e8dcc2;
  border-radius: 999px;
  background: #f4efe4;
  color: #1f1f1f;
  font-size: 12px;
  font-weight: 500;
}
.memory-button:hover:not(:disabled) {
  border-color: #d4a017;
  background: #ede3cc;
}
.memory-button.memory-delete {
  border-color: #f0c9bf;
  background: #fff5f2;
  color: #c2412d;
}
.memory-button.memory-delete:hover:not(:disabled) {
  border-color: #c2412d;
  background: #fde9e3;
}
:root[data-theme='dark'] .memory-button {
  border-color: #4a3f2b;
  background: #2b2620;
  color: #efe2c4;
}
:root[data-theme='dark'] .memory-button:hover:not(:disabled) {
  border-color: #8f7840;
  background: #3a3122;
}
:root[data-theme='dark'] .memory-button.memory-delete {
  border-color: #5a2e25;
  background: #2a1b17;
  color: #f08a76;
}

/* The attach menu in the prompt box: an image, or a document added to My files. */
.prompt-row {
  position: relative;
}
.attach-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  width: 290px;
  padding: 8px;
  border: 1px solid #ece2cc;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(31, 31, 31, 0.14);
}
.attach-menu[hidden] {
  display: none;
}
.attach-menu-title {
  margin: 4px 10px 6px;
  color: #8a6d2f;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.attach-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #1f1f1f;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.attach-item[hidden] {
  display: none;
}
.attach-item:hover,
.attach-item:focus-visible {
  outline: none;
  background: #faf6ee;
}
.attach-item small {
  color: #8a8a8a;
  font-size: 11px;
}
.attach-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 26px;
  border-radius: 7px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.attach-badge.word {
  background: #2b579a;
}
.attach-badge.pdf {
  background: #c2412d;
}
.attach-badge.image {
  background: #d4a017;
  color: #1f1f1f;
}
.attach-badge.excel {
  background: #217346;
}
.attach-badge.powerpoint {
  background: #c4502a;
}
.attach-badge.text {
  background: #6b6b6b;
}
.attach-badge.markdown {
  background: #1f1f1f;
}
:root[data-theme='dark'] .attach-badge.markdown {
  background: #3a3a3a;
}
.attach-menu-note {
  margin: 6px 10px 4px;
  color: #8a8a8a;
  font-size: 11px;
}
:root[data-theme='dark'] .attach-menu {
  border-color: #3a3122;
  background: #1f1f1f;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
:root[data-theme='dark'] .attach-menu-title {
  color: #d9c08a;
}
:root[data-theme='dark'] .attach-item {
  color: #efe2c4;
}
:root[data-theme='dark'] .attach-item:hover,
:root[data-theme='dark'] .attach-item:focus-visible {
  background: #24211b;
}

/* Stop: while a prompt runs, the send button becomes a charcoal stop button with a turning gold
   ring (brand v1.1). */
.stop-run {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-bottom: 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1f1f1f;
  cursor: pointer;
  animation: stop-breathe 1.8s ease-in-out infinite;
}
.stop-run[hidden] {
  display: none;
}
.stop-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 55%, #d4a017 80%, #e8d39f 100%);
  -webkit-mask: radial-gradient(circle, transparent 18px, #000 18.5px);
  mask: radial-gradient(circle, transparent 18px, #000 18.5px);
  animation: stop-spin 1.1s linear infinite;
}
.stop-square {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #fff;
}
.stop-run:hover:not(:disabled) .stop-square {
  background: #e8d39f;
}
.stop-run:focus-visible {
  outline: 2px solid #d4a017;
  outline-offset: 3px;
}
.stop-run:disabled {
  cursor: default;
  opacity: 0.7;
}
.stop-run:disabled .stop-ring {
  animation-duration: 2.4s;
}
@keyframes stop-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes stop-breathe {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(212, 160, 23, 0.35);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(212, 160, 23, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .stop-run,
  .stop-ring {
    animation: none;
  }
}
:root[data-theme='dark'] .stop-run {
  background: #d4a017;
}
:root[data-theme='dark'] .stop-square {
  background: #1f1f1f;
}
:root[data-theme='dark'] .stop-ring {
  background: conic-gradient(from 0deg, transparent 0 55%, #efe2c4 80%, #fff 100%);
}

/* ADR-0021: the attached-document chip and the generated document card (brand v1.1 pattern). */
.doc-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 8px 4px;
  padding: 6px 8px 6px 6px;
  border: 1px solid #ece2cc;
  border-radius: 12px;
  background: #faf6ee;
}
.doc-chip[hidden] {
  display: none;
}
.doc-chip-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
}
.doc-mode {
  display: inline-flex;
  padding: 2px;
  border: 1px solid #e8dcc2;
  border-radius: 999px;
  background: #fffdf9;
}
.doc-mode button {
  padding: 4px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #6b5a33;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.doc-mode button[hidden] {
  display: none;
}
.doc-mode button[aria-checked='true'] {
  background: #1f1f1f;
  color: #fff;
}
.doc-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #6b5a33;
  cursor: pointer;
}
.doc-chip-remove:hover {
  background: #ede3cc;
}
.document-result {
  margin: 12px 0 4px;
  max-width: 620px;
}
.document-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #ece2cc;
  border-radius: 14px;
  background: #fffdf9;
}
.document-info {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.document-info strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.document-details {
  margin-top: 8px;
  font-size: 13px;
}
.document-details summary {
  color: #8a6d2f;
  cursor: pointer;
}
.document-list {
  margin: 4px 0 8px;
  padding-left: 20px;
}
:root[data-theme='dark'] .doc-chip {
  background: #24211b;
  border-color: #3a3122;
}
:root[data-theme='dark'] .doc-mode {
  background: #1c1a17;
  border-color: #4a3f2b;
}
:root[data-theme='dark'] .doc-mode button {
  color: #d9c08a;
}
:root[data-theme='dark'] .doc-mode button[aria-checked='true'] {
  background: #d4a017;
  color: #1f1f1f;
}
:root[data-theme='dark'] .doc-chip-remove {
  color: #d9c08a;
}
:root[data-theme='dark'] .document-card {
  background: #1c1a17;
  border-color: #3a3122;
}
:root[data-theme='dark'] .document-details summary {
  color: #d9c08a;
}

/* Background work in progress, such as deleting a chat (brand v1.1): a charcoal-ringed card with a
   turning gold ring, each step's state and a gold progress bar. */
.task-progress {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  width: min(320px, calc(100vw - 32px));
  padding: 14px 16px 12px;
  border: 1px solid #ece2cc;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(31, 31, 31, 0.16);
  color: #1f1f1f;
  font-size: 13px;
  animation: task-in 0.2s ease-out;
}
.task-progress.leaving {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.task-progress-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.task-title {
  font-weight: 600;
}
.task-ring {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
.task-ring .flare-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 11px;
  transform: translate(-50%, -50%);
}
.task-progress.finished .task-ring .flare-loader,
.task-progress.failed .task-ring .flare-loader {
  display: none;
}
.task-progress.finished .task-ring {
  background: #d4a017;
}
.task-progress.finished .task-ring::before {
  content: '';
  inset: 6px 5px 7px 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  background: none;
  -webkit-mask: none;
  mask: none;
  transform: rotate(45deg);
  animation: none;
}
.task-progress.failed .task-ring {
  background: #b3412c;
}
.task-progress.failed .task-ring::before {
  display: none;
}
.task-steps {
  margin: 10px 0 10px 32px;
  padding: 0;
  list-style: none;
}
.task-step {
  position: relative;
  padding: 2px 0;
  color: #8a8578;
}
.task-step::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e3e2df;
}
.task-step[data-state='active'] {
  color: #1f1f1f;
}
.task-step[data-state='active']::before {
  background: #d4a017;
  animation: progress-pulse 1.2s ease-in-out infinite;
}
.task-step[data-state='done'] {
  color: #1f1f1f;
}
.task-step[data-state='done']::before {
  background: #8a6d2f;
}
.task-step[data-state='failed'] {
  color: #b3412c;
}
.task-step[data-state='failed']::before {
  background: #b3412c;
}
.task-bar {
  height: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: #f1ece0;
}
.task-bar-fill {
  display: block;
  height: 100%;
  width: calc(var(--task-done, 0) * 100%);
  min-width: 12%;
  border-radius: 4px;
  background: linear-gradient(90deg, #d4a017, #e8d39f);
  transition: width 0.3s ease;
}
.task-progress.failed .task-bar-fill {
  background: #b3412c;
}
.task-close {
  margin-top: 10px;
}
@keyframes task-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .task-progress,
  .task-ring::before,
  .task-step[data-state='active']::before {
    animation: none;
  }
}
/* A chat being deleted stays in Recents, dimmed with a turning ring, until it is gone. */
.run-item.deleting {
  position: relative;
  opacity: 0.55;
  pointer-events: none;
}
.run-item.deleting::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 18px;
  height: 13px;
  margin-top: -6.5px;
  background: url('brand/aionflare-icon.png') center / 150% no-repeat;
  animation: flare-drift 1.2s ease-in-out infinite;
}
/* The flare drifting like a wave while a chat is deleted. */
@keyframes flare-drift {
  0%,
  100% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(3px) skewX(-8deg);
    opacity: 0.55;
  }
}
/* The prompt box keeps a long placeholder on one line. */
#prompt::placeholder {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:root[data-theme='dark'] .task-progress {
  border-color: #3a3122;
  background: #1c1a17;
  color: #f2efe8;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
:root[data-theme='dark'] .task-step[data-state='active'],
:root[data-theme='dark'] .task-step[data-state='done'] {
  color: #f2efe8;
}
:root[data-theme='dark'] .task-step::before {
  background: #3a3122;
}
:root[data-theme='dark'] .task-step[data-state='done']::before {
  background: #d4a017;
}
:root[data-theme='dark'] .task-bar {
  background: #2a261f;
}
:root[data-theme='dark'] .task-progress.finished .task-ring {
  background: #d4a017;
}

/* Loading a member's chats after a refresh or sign-in (brand v1.1): the turning gold ring, then
   placeholder messages and Recents rows with a soft gold shimmer. Appears after 150 ms, so a fast
   load does not flash. */
.history-loading {
  max-width: 760px;
  margin: 24px auto;
  padding: 0 16px;
  opacity: 0;
  animation: history-in 0.25s ease-out 0.15s forwards;
}
.loading-history .ready {
  visibility: hidden;
}
.history-loading-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
  color: #6b5a33;
  font-size: 14px;
  font-weight: 500;
}
.history-ghosts {
  display: grid;
  gap: 14px;
}
.ghost {
  display: block;
  border-radius: 10px;
  background: linear-gradient(90deg, #f1ece0 0%, #faf6ee 40%, #f1ece0 80%);
  background-size: 200% 100%;
  animation: ghost-shimmer 1.4s ease-in-out infinite;
}
.ghost-question {
  justify-self: end;
  width: min(320px, 60%);
  height: 40px;
  border-radius: 18px;
}
.ghost-answer {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid #ece2cc;
  border-radius: 16px;
}
.ghost-line {
  height: 12px;
}
.ghost-line.short {
  width: 55%;
}
.recents-loading {
  display: grid;
  gap: 8px;
  padding: 6px 8px;
}
.ghost-row {
  height: 14px;
  border-radius: 6px;
}
.ghost-row:nth-child(even) {
  width: 75%;
}
@keyframes history-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ghost-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .history-loading {
    animation: none;
    opacity: 1;
  }
  .ghost {
    animation: none;
  }
}
:root[data-theme='dark'] .ghost {
  background: linear-gradient(90deg, #24211b 0%, #2f2a21 40%, #24211b 80%);
  background-size: 200% 100%;
}
:root[data-theme='dark'] .ghost-answer {
  border-color: #3a3122;
}
:root[data-theme='dark'] .history-loading-head {
  color: #e8d39f;
}
.loading-history #scroll-bottom {
  display: none;
}

/* ADR-0021 amendment: up to two attached files, each a pill with its own remove button, in the
   prompt box; the same pills sit on the sent message (brand v1.2 UI pattern). */
.doc-chip-files {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.file-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 3px 6px 3px 4px;
  border: 1px solid #ece2cc;
  border-radius: 10px;
  background: #fffdf9;
  font-size: 13px;
  font-weight: 500;
}
.file-pill .attach-badge {
  flex-shrink: 0;
}
.file-pill-name {
  min-width: 0;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-pill .doc-chip-remove {
  width: 20px;
  height: 20px;
  margin-left: -2px;
}
.message-files {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin-bottom: 8px;
}
.message-files .file-pill {
  background: #fff;
}
:root[data-theme='dark'] .file-pill,
:root[data-theme='dark'] .message-files .file-pill {
  border-color: #3a3122;
  background: #1c1a17;
  color: #f2efe8;
}

/* ADR-0023: the sign-in card, in the Workspace UI pattern (cream card, pill inputs and buttons). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.signin-card {
  max-width: 500px;
  text-align: center;
}
.signin-card h2 {
  margin-bottom: 6px;
}
.signin-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.signin-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border: 1px solid #e8dcc2;
  border-radius: 999px;
  background: #fffdf9;
  color: #8a8a8a;
}
.signin-field[hidden] {
  display: none;
}
.signin-field:focus-within {
  border-color: #d4a017;
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.25);
}
.signin-field input {
  flex: 1;
  min-width: 0;
  padding: 11px 0;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  color: #1f1f1f;
}
.signin-wide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  border-radius: 999px;
  font-size: 14px;
}
.signin-card .primary-button:disabled {
  background: #d6d3cd;
  color: #fff;
  cursor: default;
}
.signin-provider {
  margin-top: 10px;
  border-color: #e8dcc2;
  background: #f4efe4;
  font-weight: 500;
}
.signin-provider:hover:not(:disabled) {
  border-color: #d4a017;
  background: #ede3cc;
}
.signin-links {
  display: flex;
  justify-content: space-between;
}
.signin-links[hidden] {
  display: none;
}
.signin-toggle {
  align-self: center;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.signin-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 6px;
  color: #8a8a8a;
  font-size: 12px;
}
.signin-or::before,
.signin-or::after {
  content: '';
  flex: 1;
  border-top: 1px solid #ece2cc;
}
.signin-note {
  margin: 16px 0 0;
  font-size: 12px;
}
#verify-card .signin-wide + .signin-wide {
  margin-top: 10px;
}
@media (max-width: 520px) {
  .signin-card {
    margin: 24px 16px;
    padding: 22px 18px;
  }
}
:root[data-theme='dark'] .signin-field {
  border-color: #4a3f2b;
  background: #1c1a17;
  color: #a8a49d;
}
:root[data-theme='dark'] .signin-field input {
  color: #e7e6e3;
}
:root[data-theme='dark'] .signin-provider {
  border-color: #4a3f2b;
  background: #2b2620;
  color: #e7e6e3;
}
:root[data-theme='dark'] .signin-provider:hover:not(:disabled) {
  border-color: #d4a017;
  background: #332c22;
}
:root[data-theme='dark'] .signin-card .primary-button:disabled {
  background: #3a3833;
  color: #8a8a8a;
}
:root[data-theme='dark'] .signin-or::before,
:root[data-theme='dark'] .signin-or::after {
  border-color: #3a3122;
}
.signin-card > p.muted:not(.signin-note) {
  font-size: 14px;
}
.signin-field input {
  font-size: 15px;
}
/* While the sign-in or verify card shows, the welcome heading, scroll button and prompt box step
   aside, so the card is never under the prompt box. */
main.signing-in .ready,
main.signing-in #scroll-bottom,
main.signing-in #compose {
  display: none;
}

/* ADR-0025: the Subscribe card a guest sees after the free prompts, in the conversation. */
.subscribe-card {
  max-width: 560px;
  margin: 18px auto 8px;
  padding: 22px 24px 18px;
  border: 1px solid #ece2cc;
  border-radius: 18px;
  background: #fffdf9;
  box-shadow: 0 6px 24px rgba(31, 31, 31, 0.06);
  text-align: center;
  animation: reveal-card 0.32s ease both;
}
.subscribe-mark {
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: #d4a017;
}
.subscribe-card h2 {
  margin: 0 0 6px;
  font-family: Poppins, 'Source Sans 3', sans-serif;
  font-size: 1.15rem;
  color: #1f1f1f;
}
.subscribe-card p {
  margin: 0;
  color: #4a4a4a;
  line-height: 1.5;
}
.subscribe-actions {
  display: flex;
  justify-content: center;
  margin: 16px 0 10px;
}
.subscribe-actions button {
  padding: 10px 26px;
  border: none;
  border-radius: 999px;
  background: #1f1f1f;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.subscribe-actions button:hover {
  background: #333;
}
.subscribe-actions button:focus-visible {
  outline: 3px solid rgba(212, 160, 23, 0.55);
  outline-offset: 2px;
}
.subscribe-card .subscribe-note {
  font-size: 0.85rem;
  color: #8a6d2f;
}
:root[data-theme='dark'] .subscribe-card {
  border-color: #3a3122;
  background: #1c1a17;
  box-shadow: none;
}
:root[data-theme='dark'] .subscribe-card h2 {
  color: #f3efe6;
}
:root[data-theme='dark'] .subscribe-card p {
  color: #cfc8ba;
}
:root[data-theme='dark'] .subscribe-card .subscribe-note {
  color: #d9c08a;
}
:root[data-theme='dark'] .subscribe-actions button {
  background: #d4a017;
  color: #1f1f1f;
}
@media (max-width: 600px) {
  .subscribe-card {
    margin: 14px 4px 6px;
    padding: 18px 16px 14px;
  }
}

/* The line under the prompt box: report a bug, request a feature. */
.notice-link {
  padding: 0;
  border: 0;
  background: none;
  color: #8a6d2f;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.notice-link:hover {
  color: #6b5a33;
}
.notice-link:focus-visible {
  outline: 2px solid rgba(212, 160, 23, 0.6);
  outline-offset: 2px;
  border-radius: 3px;
}
:root[data-theme='dark'] .notice-link {
  color: #d9c08a;
}
.report-dialog textarea {
  width: 100%;
  min-height: 120px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #e8dcc2;
  border-radius: 14px;
  background: #fffdf9;
  font: inherit;
  resize: vertical;
}
.report-dialog textarea:focus {
  outline: 3px solid rgba(212, 160, 23, 0.35);
  border-color: #d4a017;
}
:root[data-theme='dark'] .report-dialog textarea {
  border-color: #4a3f2b;
  background: #1c1a17;
  color: #f3efe6;
}
.report-row {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.report-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.report-row .report-text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ADR-0025 amendment: closes the sign-in card a guest opened by choice. */
.signin-guest-back {
  margin: 4px auto 0;
  padding: 4px 8px;
  border: 0;
  background: none;
  color: #8a6d2f;
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.signin-guest-back[hidden] {
  display: none;
}
:root[data-theme='dark'] .signin-guest-back {
  color: #d9c08a;
}

/* Top right: Login and Sign-up before the light/dark switch. */
.toolbar-end {
  display: flex;
  align-items: center;
  gap: 10px;
}
.auth-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.auth-actions[hidden] {
  display: none;
}
.auth-actions button {
  padding: 7px 16px;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .auth-actions button {
    padding: 6px 12px;
    font-size: 13px;
  }
}

/* ADR-0025: the close button a guest with free prompts left sees on the sign-in card. */
.signin-card {
  position: relative;
}
/* The heading keeps clear of the close button on both sides, so it stays centred. */
.signin-card > h2 {
  padding: 0 40px;
}
.signin-close {
  position: absolute;
  top: 14px;
  right: 14px;
  cursor: pointer;
}
.signin-close[hidden] {
  display: none;
}
.signin-close:hover {
  border-color: #d4a017;
  color: #1f1f1f;
}
:root[data-theme='dark'] .signin-close {
  border-color: #4a3f2b;
  color: #cfc8ba;
}

/* ADR-0017 amendment (Phase 6 item 10): plans, extra members and top-ups in Plan & usage. */
.plan-test {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 12px;
  border: 1px dashed #d4a017;
  border-radius: 999px;
  color: #8a6d2f;
  font-size: 12px;
}
.plan-warn {
  border-color: #e7b3a8;
  background: #fdf1ee;
}
.plan-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 8px 0 16px;
}
.plan-option {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid #ece2cc;
  border-radius: 12px;
  background: #fffdf9;
}
.plan-option.current {
  border-color: #d4a017;
  box-shadow: 0 0 0 1px #d4a017 inset;
}
.plan-option strong {
  font-family: Poppins, 'Source Sans 3', sans-serif;
}
.plan-price {
  font-size: 15px;
  font-weight: 600;
}
.plan-option button {
  margin-top: 8px;
  align-self: flex-start;
}
.plan-current {
  margin-top: 8px;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  background: #f4efe4;
  color: #6b5a33;
  font-size: 12px;
}
.plan-seats,
.plan-topups {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 8px 0 16px;
}
.plan-seats input {
  width: 80px;
  padding: 7px 12px;
  border: 1px solid #e8dcc2;
  border-radius: 999px;
  background: #fffdf9;
  color: inherit;
}
.plan-status:empty {
  display: none;
}
:root[data-theme='dark'] .plan-test {
  color: #d9c08a;
}
:root[data-theme='dark'] .plan-warn {
  background: #2e1f1a;
  border-color: #6a3a2e;
}
:root[data-theme='dark'] .plan-option {
  background: #1c1a17;
  border-color: #3a3122;
}
:root[data-theme='dark'] .plan-option.current {
  border-color: #d4a017;
}
:root[data-theme='dark'] .plan-current {
  background: #2b2620;
  color: #d9c08a;
}
:root[data-theme='dark'] .plan-seats input {
  background: #1c1a17;
  border-color: #4a3f2b;
}
/* The checkout page (pay.html). */
.pay-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 16px;
  background: #f8f6ef;
}
.pay-card {
  width: min(440px, 100%);
  padding: 28px;
  border: 1px solid #ece2cc;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(31, 31, 31, 0.08);
  text-align: center;
}
.pay-card h1 {
  margin: 8px 0;
  font-family: Poppins, 'Source Sans 3', sans-serif;
  font-size: 22px;
}
.pay-logo {
  width: 240px;
  height: auto;
}
.pay-test {
  color: #8a6d2f;
  font-size: 13px;
}
.pay-back {
  display: inline-block;
  margin-top: 12px;
  text-decoration: none;
}
:root[data-theme='dark'] .pay-page {
  background: #171717;
}
:root[data-theme='dark'] .pay-card {
  background: #1f1f1f;
  border-color: #3a3122;
  color: #f5f5f5;
}
.pay-card .pay-logo:not(.brand-logo-dark),
:root[data-theme='dark'] .pay-card .pay-logo.brand-logo-dark {
  display: block;
  margin: 0 auto;
}
:root[data-theme='dark'] .pay-card .pay-logo.brand-logo-light {
  display: none;
}

/* Plan & usage: the payment notice at the top of Plans, with progress while Paddle confirms. */
.plan-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid #ece2cc;
  border-radius: 12px;
  background: #faf6ee;
  font-size: 13px;
}
.plan-notice[hidden] {
  display: none;
}
.plan-notice.done {
  border-color: #d4a017;
}
.plan-notice.error {
  border-color: #e7b3a8;
  background: #fdf1ee;
  color: #a3341f;
}
:root[data-theme='dark'] .plan-notice {
  background: #24211b;
  border-color: #3a3122;
}
:root[data-theme='dark'] .plan-notice.done {
  border-color: #d4a017;
}
:root[data-theme='dark'] .plan-notice.error {
  background: #2e1f1a;
  border-color: #6a3a2e;
  color: #f08a76;
}

/* ADR-0027: the maintenance notice above the prompt box, and the Service panel. */
.maintenance-banner {
  display: flex;
  gap: 8px;
  align-items: baseline;
  max-width: 760px;
  margin: 0 auto 10px;
  padding: 10px 14px;
  border: 1px solid #e7b3a8;
  border-radius: 12px;
  background: #fdf1ee;
  color: #6b2a1d;
  font-size: 14px;
}
.maintenance-banner[hidden] {
  display: none;
}
.maintenance-banner strong {
  color: #a3341f;
}
.service-card {
  display: grid;
  gap: 10px;
  margin: 12px 0 16px;
  padding: 16px;
  border: 1px solid #ece2cc;
  border-radius: 12px;
  background: #fffdf9;
}
.service-label {
  font-size: 13px;
  color: #6b5a33;
}
.service-card textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e8dcc2;
  border-radius: 12px;
  background: #fffdf9;
  color: inherit;
  font: inherit;
  resize: vertical;
}
.service-actions {
  display: flex;
  justify-content: flex-end;
}
:root[data-theme='dark'] .maintenance-banner {
  background: #2e1f1a;
  border-color: #6a3a2e;
  color: #f3c9be;
}
:root[data-theme='dark'] .maintenance-banner strong {
  color: #f08a76;
}
:root[data-theme='dark'] .service-card {
  background: #1c1a17;
  border-color: #3a3122;
}
:root[data-theme='dark'] .service-label {
  color: #d9c08a;
}
:root[data-theme='dark'] .service-card textarea {
  background: #1c1a17;
  border-color: #4a3f2b;
}

/* ADR-0030: confirming account deletion by typing DELETE. */
.delete-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.delete-confirm[hidden] {
  display: none;
}
.delete-confirm label {
  font-size: 13px;
}
.delete-confirm input {
  width: 120px;
  padding: 7px 12px;
  border: 1px solid #e7b3a8;
  border-radius: 999px;
  background: #fffdf9;
  color: inherit;
  font: inherit;
}
:root[data-theme='dark'] .delete-confirm input {
  background: #1c1a17;
  border-color: #6a3a2e;
}

/* ADR-0024 (Phase 7 item 10): the Workflows dialog. */
.workflows-dialog {
  width: min(760px, calc(100vw - 32px));
}
.workflow-tabs {
  margin-bottom: 12px;
}
.workflow-cards {
  display: grid;
  gap: 12px;
}
.workflow-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid #ece2cc;
  border-radius: 12px;
  background: #fffdf9;
}
.workflow-card button {
  align-self: flex-start;
  margin-top: 4px;
}
.workflow-card strong,
.workflow-run-title strong {
  font-family: var(--font-display);
}
.workflow-hint {
  color: #8a6d2f;
}
.workflow-fields {
  display: grid;
  gap: 6px;
}
.workflow-fields input,
.workflow-fields textarea,
.workflow-fields select,
.service-card select,
.service-card input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #e8dcc2;
  border-radius: 12px;
  background: #fffdf9;
  color: inherit;
  font: inherit;
}
.workflow-fields input[type='checkbox'] {
  width: auto;
}
.workflow-run {
  padding: 0;
}
.workflow-run-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.workflow-run-head small {
  grid-column: 1 / -1;
}
.workflow-run-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.workflow-state.completed {
  background: #f4efe4;
  border-color: #d4a017;
}
.workflow-state.failed,
.workflow-state.cancelled {
  color: #a3341f;
}
.workflow-run-detail {
  padding: 0 14px 14px;
}
.workflow-output {
  max-height: 260px;
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid #efe7d6;
  border-radius: 10px;
  background: #fffdf9;
  white-space: pre-wrap;
  font-size: 14px;
}
:root[data-theme='dark'] .workflow-card,
:root[data-theme='dark'] .workflow-output {
  background: #1c1a17;
  border-color: #3a3122;
}
:root[data-theme='dark'] .workflow-hint {
  color: #d9c08a;
}
:root[data-theme='dark'] .workflow-fields input,
:root[data-theme='dark'] .workflow-fields textarea,
:root[data-theme='dark'] .workflow-fields select,
:root[data-theme='dark'] .service-card select,
:root[data-theme='dark'] .service-card input {
  background: #1c1a17;
  border-color: #4a3f2b;
}
:root[data-theme='dark'] .workflow-state.completed {
  background: #2b2620;
}
:root[data-theme='dark'] .workflow-state.failed,
:root[data-theme='dark'] .workflow-state.cancelled {
  color: #f08a76;
}