app.css

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/assets/fonts/HankenGrotesk-normal-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/assets/fonts/HankenGrotesk-italic-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/JetBrainsMono-normal-latin.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-display: swap;
}
:root {
  --bg: #121212;
  --card: #1a1a1b;
  --line: #2d2d2f;
  --muted: #919194;
  --ink: #f5f4f0;
  --lime: #5091fd;
  --violet: #5091fd;
  --radius: 22px;
} /* legacy aliases repointed to brand primary */
* {
  box-sizing: border-box;
}
html,
body {
  background: radial-gradient(circle at 50% 0%, #292829 0, #151515 38%, #0c0c0d 100%);
}
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  letter-spacing: -0.015em;
}
/* The documentation route is real UI with fictional data. Give content-heavy
   states the same comfortable desktop width as the search capture. */
html[data-demo-capture='true'] .command-card {
  width: min(840px, 100%);
}
html[data-demo-capture='true'] .shell {
  align-items: center;
  padding: 24px;
}
html[data-demo-capture='true'] {
  scrollbar-gutter: stable both-edges;
}
html[data-demo-capture='true'] .theme-gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html[data-demo-capture='true'] .theme-gallery .theme-card:nth-child(n + 7) {
  display: none;
}
html[data-demo-capture='true'],
html[data-demo-capture='true'] body {
  overflow: hidden;
}
html[data-demo-capture='true'] .settings-view > .settings-section:not(:has(.theme-gallery)) {
  display: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family:
    'Hanken Grotesk',
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  background: radial-gradient(circle at 50% 0%, #292829 0, #151515 38%, #0c0c0d 100%);
  letter-spacing: -0.015em;
}
button,
input {
  font: inherit;
}
button {
  color: inherit;
  cursor: pointer;
}
.shell {
  min-height: 100vh;
  display: grid;
  justify-items: center;
  align-items: start;
  padding: clamp(36px, 10vh, 110px) 24px 24px;
}
.command-card {
  width: min(720px, 100%);
  max-height: min(700px, calc(100vh - clamp(60px, 10vh, 134px)));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #39393b;
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(35, 35, 37, 0.98), rgba(22, 22, 23, 0.98));
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.5),
    inset 0 1px rgba(255, 255, 255, 0.045);
}
button:focus-visible {
  outline: 2px solid #a6d2ff;
  outline-offset: 2px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #a6d2ff;
  outline-offset: 2px;
}
.topbar {
  flex: 0 0 61px;
  height: 61px;
  padding: 0 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand {
  font-weight: 720;
  font-size: 16px;
  letter-spacing: -0.04em;
}
.brand-button {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 5px 7px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.brand-button:hover,
.brand-button:focus-visible {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  outline: 0;
}
.spark {
  display: inline-flex;
  vertical-align: -2px;
  color: var(--lime);
  margin-right: 6px;
}
.spark svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
.local-dot {
  margin-left: 8px;
  padding: 3px 6px;
  border-radius: 5px;
  background: #2a2a2c;
  color: #a0a0a3;
  font-size: 10px;
  letter-spacing: 0.04em;
  font-weight: 600;
  vertical-align: 2px;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.status {
  color: #a8a8aa;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.settings-button {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #8fa8c4;
}
.settings-button:hover,
.settings-button:focus-visible {
  background: rgba(80, 145, 253, 0.12);
  color: #d9ebff;
  outline: 0;
}
.settings-button svg {
  width: 15px;
}
.live-dot,
.connection i {
  height: 7px;
  width: 7px;
  border-radius: 99px;
  background: var(--lime);
  box-shadow: 0 0 0 3px rgba(201, 255, 98, 0.1);
}
.search-row {
  flex: 0 0 81px;
  height: 81px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  transition: background 0.12s ease;
}
.search-row:focus-within {
  background: rgba(80, 145, 253, 0.025);
}
.search-icon {
  display: flex;
  color: #d8d8d9;
}
.search-icon svg {
  width: 19px;
  height: 19px;
}
input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 19px;
  font-weight: 450;
}
#command-input:focus,
#command-input:focus-visible {
  outline: 0;
  box-shadow: none;
}
input::placeholder {
  color: #8d8d90;
}
kbd {
  border: 1px solid #454547;
  border-bottom-color: #353537;
  background: #252526;
  box-shadow: inset 0 1px #48484a;
  padding: 3px 6px;
  border-radius: 5px;
  color: #bbb;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.icon svg {
  width: 18px;
  height: 18px;
}
.pdf {
  color: #ffb6ae;
  background: #532c2b;
  position: relative;
}
.pdf svg {
  width: 19px;
  height: 19px;
}
.pdf::after {
  content: '';
  position: absolute;
  right: 7px;
  top: 7px;
  width: 5px;
  height: 5px;
  border-top: 1px solid #ffc6bd;
  border-right: 1px solid #ffc6bd;
  opacity: 0.75;
}
.content {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 29px 25px 22px;
  scrollbar-width: thin;
  scrollbar-color: #4a4a4d transparent;
}
.content::-webkit-scrollbar {
  width: 8px;
}
.content::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 10px;
  background: #4a4a4d;
  background-clip: padding-box;
}
.hidden {
  display: none !important;
}
.searching-local {
  padding: 6px 2px;
  color: #98989b;
  font-size: 12px;
}
.loading-state {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  color: #9b9b9e;
  font-size: 11px;
}
.loading-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.loading-copy small {
  color: #7a7a7d;
  font-size: 10px;
}
.spinner {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 2px solid #48484b;
  border-top-color: var(--lime);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.intro p {
  margin: 0 0 6px;
}
.eyebrow,
.section-heading {
  color: #929295;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
}
.intro h1 {
  margin: 0 0 25px;
  font-size: 25px;
  letter-spacing: -0.04em;
  font-weight: 650;
}
.quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.quick-action {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 12px;
  border: 1px solid #343436;
  border-radius: 13px;
  background: #222224;
  transition: 0.15s ease;
}
.quick-action:hover,
.result:hover {
  border-color: #636368;
  background: #29292b;
  transform: translateY(-1px);
}
.quick-action b,
.connection b {
  display: block;
  font-size: 13px;
  font-weight: 620;
}
.quick-action small,
.connection small {
  display: block;
  color: #99999c;
  font-size: 11px;
  margin-top: 3px;
}
.quick-action em {
  margin-left: auto;
  color: #77777a;
  font-size: 10px;
  font-style: normal;
}
.icon {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  font-weight: 700;
  font-size: 18px;
}
.whatsapp {
  color: #8ded72;
  background: #214227;
}
.calendar {
  color: #f5b0a2;
  background: #4a2825;
}
.files {
  color: #9dc8ff;
  background: #263b58;
}
.agents {
  color: #d0c3ff;
  background: #352f54;
}
.gmail {
  color: #ffad9c;
  background: #4e2927;
  font-size: 14px;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 29px 1px 12px;
}
.section-heading button {
  padding: 0;
  border: 0;
  background: none;
  color: #a7a7aa;
  font-size: 11px;
}
.quick-action b,
.connection b {
  display: block;
  font-size: 13px;
  font-weight: 620;
}
.connection-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}
.connection {
  padding: 10px;
  min-width: 0;
  border: 1px solid #303032;
  border-radius: 12px;
  background: #1d1d1f;
  position: relative;
}
.connection .icon {
  width: 29px;
  height: 29px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 8px;
}
.connection b {
  font-size: 11px;
}
.connection small {
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.connection i {
  position: absolute;
  right: 9px;
  top: 11px;
  width: 5px;
  height: 5px;
}
.connection button {
  margin-top: 7px;
  border: 0;
  padding: 0;
  background: none;
  color: var(--lime);
  font-size: 10px;
  font-weight: 700;
}
.connection:has(button) i {
  display: none;
}
.agenda-home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 1px 8px;
  color: #929295;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.agenda-home-header button {
  display: flex;
  align-items: center;
  gap: 3px;
  border: 0;
  background: transparent;
  color: #aaa;
  font-size: 10px;
}
.agenda-home-header button:hover {
  color: var(--lime);
}
.agenda-home-header svg {
  width: 12px;
}
.agenda-glance {
  display: grid;
  gap: 6px;
}
.glance-event {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 66px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  text-align: left;
}
.glance-event:hover {
  border-color: #555559;
  background: #29292b;
}
.glance-event.next {
  background: linear-gradient(90deg, rgba(201, 255, 98, 0.12), rgba(201, 255, 98, 0.035));
  box-shadow: inset 3px 0 var(--lime);
}
.glance-time {
  width: 54px;
  color: #96969a;
  font-size: 10px;
  text-transform: uppercase;
}
.glance-time b {
  display: block;
  margin-top: 3px;
  color: #d7d7d9;
  font-size: 12px;
  text-transform: none;
}
.glance-copy {
  flex: 1;
  min-width: 0;
}
.glance-copy b,
.glance-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.glance-copy b {
  font-size: 13px;
}
.glance-copy small {
  margin-top: 3px;
  color: #97979b;
  font-size: 10px;
}
.glance-event > svg {
  width: 15px;
  margin-right: 2px;
  color: #818186;
}
.home-divider {
  height: 1px;
  margin: 24px 0 16px;
  background: #303033;
}
.proactive-footnote {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #9a9a9d;
}
.proactive-footnote .icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}
.proactive-footnote b,
.proactive-footnote small {
  display: block;
}
.proactive-footnote b {
  color: #c7c7ca;
  font-size: 11px;
}
.proactive-footnote small {
  margin-top: 2px;
  font-size: 10px;
}
.proactive-footnote button {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #aaa;
  font-size: 10px;
}
.proactive-footnote button:hover {
  color: var(--lime);
}
.proactive-footnote button svg {
  width: 13px;
}
.proactive-briefing {
  display: grid;
  gap: 7px;
  margin: 14px 0 17px;
}
.proactive-briefing:empty {
  display: none;
}
.briefing-heading {
  color: #93aac4;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.11em;
}
.briefing-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 9px 10px;
  border: 1px solid rgba(80, 145, 253, 0.16);
  border-radius: 9px;
  background: rgba(22, 43, 74, 0.18);
  color: var(--ink);
}
.briefing-icon {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(80, 145, 253, 0.13);
  color: #a9d2ff;
}
.briefing-icon svg {
  width: 15px;
  height: 15px;
}
.briefing-copy {
  min-width: 0;
}
.briefing-copy b,
.briefing-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.briefing-copy b {
  color: #e6f1ff;
  font-size: 11px;
}
.briefing-copy small {
  margin-top: 3px;
  color: #9bb4cf;
  font-size: 10px;
}
.briefing-mail {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
}
.briefing-mail:hover,
.briefing-mail:focus-visible {
  border-color: rgba(80, 145, 253, 0.48);
  background: rgba(80, 145, 253, 0.08);
  outline: 0;
}
.briefing-mail .icon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 7px;
}
.briefing-mail span:nth-child(2) {
  min-width: 0;
  flex: 1;
}
.briefing-mail b,
.briefing-mail small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.briefing-mail b {
  color: #e6f1ff;
  font-size: 11px;
}
.briefing-mail small {
  margin-top: 2px;
  color: #9bb4cf;
  font-size: 10px;
}
.briefing-mail time {
  color: #9bb4cf;
  font-size: 9px;
  white-space: nowrap;
}
.proactive-mail {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}
.proactive-mail:empty {
  display: none;
}
.proactive-mail-list {
  display: grid;
  gap: 6px;
}
.agenda-glance .glance-event,
.proactive-mail .briefing-mail {
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid rgba(80, 145, 253, 0.16);
  border-radius: 9px;
  background: rgba(22, 43, 74, 0.18);
}
.agenda-glance .glance-event:hover,
.proactive-mail .briefing-mail:hover,
.proactive-mail .briefing-mail:focus-visible {
  border-color: rgba(80, 145, 253, 0.5);
  background: rgba(80, 145, 253, 0.1);
}
.agenda-glance .glance-event.next {
  border-color: rgba(80, 145, 253, 0.32);
  background: linear-gradient(90deg, rgba(80, 145, 253, 0.18), rgba(80, 145, 253, 0.05));
}
.quick-samples button {
  border-color: rgba(80, 145, 253, 0.24);
  background: rgba(22, 43, 74, 0.32);
  color: #b9d3ee;
}
.quick-samples button:hover {
  border-color: rgba(80, 145, 253, 0.58);
  background: rgba(80, 145, 253, 0.12);
  color: #edf6ff;
}
.clear-day {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 2px 16px;
}
.clear-day .icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
}
.clear-day b,
.clear-day small {
  display: block;
}
.clear-day b {
  padding-top: 2px;
  color: #e2e2e4;
  font-size: 13px;
}
.clear-day small {
  margin-top: 4px;
  color: #959599;
  font-size: 11px;
  line-height: 1.4;
}
.openwa-setup {
  padding: 8px 0;
}
.openwa-setup > .icon {
  width: 43px;
  height: 43px;
  float: left;
  margin: 0 13px 10px 0;
}
.openwa-setup h2 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.03em;
}
.openwa-setup p {
  margin: 6px 0 0;
  color: #a1a1a4;
  font-size: 12px;
  line-height: 1.5;
}
.openwa-actions {
  display: flex;
  clear: both;
  gap: 8px;
  padding-top: 17px;
}
.openwa-actions button {
  display: flex;
  align-items: center;
  gap: 6px;
}
.openwa-actions svg {
  width: 13px;
}
.openwa-setup > small {
  display: block;
  margin-top: 12px;
  color: #87878b;
  font-size: 10px;
}
.openwa-intro {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.openwa-intro .icon {
  width: 43px;
  height: 43px;
  border-radius: 11px;
}
.openwa-setup h2 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.03em;
}
.openwa-setup p {
  margin: 6px 0 0;
  color: #a1a1a4;
  font-size: 12px;
  line-height: 1.5;
}
.setup-steps {
  display: grid;
  gap: 0;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid #363639;
  border-radius: 11px;
  overflow: hidden;
}
.setup-steps li {
  display: grid;
  grid-template-columns: 25px 1fr auto;
  align-items: center;
  gap: 9px;
  min-height: 47px;
  padding: 8px 10px;
  border-bottom: 1px solid #323235;
  color: #8e8e92;
}
.setup-steps li:last-child {
  border-bottom: 0;
}
.setup-steps li.active {
  color: #e8e8e9;
  background: #27272a;
}
.setup-steps li.done {
  color: #b2cfff;
}
.setup-steps li > span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid #55555a;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
}
.setup-steps li.done > span {
  border-color: var(--primary);
  background: #16294d;
  color: #b2cfff;
}
.setup-steps li b {
  font-size: 11px;
}
.setup-steps li small {
  color: #929296;
  font-size: 10px;
}
.openwa-actions {
  display: flex;
  clear: both;
  gap: 8px;
  padding-top: 17px;
}
.openwa-actions button {
  display: flex;
  align-items: center;
  gap: 6px;
}
.openwa-actions svg {
  width: 13px;
}
.openwa-qr {
  display: block;
  width: 210px;
  height: 210px;
  margin: 20px auto 4px;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
}
.connection-pending {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 17px 0 0;
  padding: 12px;
  border: 1px solid #3b3b3f;
  border-radius: 10px;
  background: #202023;
}
.connection-pending b,
.connection-pending small {
  display: block;
}
.connection-pending b {
  font-size: 11px;
}
.connection-pending small {
  margin-top: 3px;
  color: #949498;
  font-size: 10px;
}
.link-warning {
  margin: 17px 0 -4px;
  padding: 10px 11px;
  border: 1px solid #654c31;
  border-radius: 9px;
  background: #33291f;
  color: #e7bd86;
  font-size: 11px;
  line-height: 1.4;
}
.risk-disclosure {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0 0;
  padding: 9px 11px;
  border: 1px solid #363639;
  border-radius: 9px;
  background: #202023;
}
.risk-disclosure small {
  color: #a1a1a4;
  font-size: 11px;
  line-height: 1.4;
}
.link-button {
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #8fb8ff;
  font-size: 11px;
  cursor: pointer;
}
.quick-samples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
}
.quick-samples > span {
  margin-right: 3px;
  color: #858589;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.quick-samples button {
  padding: 5px 7px;
  border: 1px solid #3b3b3e;
  border-radius: 6px;
  background: #252527;
  color: #b9b9bc;
  font-size: 10px;
}
.quick-samples button:hover {
  border-color: #68686c;
  color: #f0f0f1;
}
footer {
  flex: 0 0 53px;
  height: 53px;
  border-top: 1px solid var(--line);
  padding: 0 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #8f8f92;
  font-size: 10px;
}
footer kbd {
  padding: 1px 4px;
  margin-right: 2px;
  font-size: 9px;
}
.footer-status {
  display: flex;
  align-items: center;
  gap: 9px;
}
.update-available {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 6px;
  padding: 4px 7px;
  background: rgba(80, 145, 253, 0.16);
  color: #bdddff;
  font: 600 10px inherit;
}
.update-available:hover,
.update-available:focus-visible {
  background: rgba(80, 145, 253, 0.28);
  color: #fff;
  outline: 0;
}
.update-available svg {
  width: 12px;
  height: 12px;
}
.local-files-section {
  min-height: 54px;
}
.local-files-slot {
  min-height: 54px;
}
.inline-section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #303033;
}
.local-files-section--only {
  min-height: 0;
}
.local-files-section--only .local-files-slot {
  min-height: 0;
}
.local-files-section--only .inline-section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.inline-section .result-header {
  margin-bottom: 8px;
}
.local-files-loading,
.local-files-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 12px 2px;
  color: #96969a;
  font-size: 11px;
}
.local-files-empty {
  color: #7f7f83;
}
.mini-spinner {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border: 2px solid #4a4a4d;
  border-top-color: var(--lime);
  border-radius: 50%;
  animation: habibi-spin 0.7s linear infinite;
}
@keyframes habibi-spin {
  to {
    transform: rotate(360deg);
  }
}
.source-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 14px;
  padding: 9px 10px;
  border: 1px solid #3b3b3f;
  border-radius: 8px;
  background: #202023;
  color: #9d9da1;
  font-size: 10px;
  line-height: 1.4;
}
.source-notice b {
  color: #e6e6e8;
  white-space: nowrap;
}
.source-notice span {
  flex: 1;
}
.source-notice button {
  flex: 0 0 auto;
  border: 1px solid #55555a;
  border-radius: 6px;
  background: #303033;
  color: #ededee;
  padding: 5px 7px;
  font-size: 10px;
  font-weight: 650;
}
.source-notice button:hover {
  border-color: var(--primary);
  color: var(--lime);
}
.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1px 2px 16px;
}
.result-header b {
  font-size: 13px;
}
.result-header span {
  color: #8e8e91;
  font-size: 11px;
}
.result-header kbd {
  margin-left: 5px;
  padding: 1px 4px;
  font-size: 9px;
}
.result-list {
  display: grid;
  gap: 5px;
}
.result {
  width: 100%;
  min-width: 0;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  padding: 10px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  transition: 0.12s;
}
.result[hidden] {
  display: none;
}
.result.selected {
  border-color: #69696d;
  background: #2a2a2c;
}
.result-copy {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.result-title {
  display: block;
  overflow: hidden;
  color: #f0f0f1;
  font-size: 14px;
  font-weight: 590;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.result-meta {
  display: block;
  max-width: 100%;
  overflow: hidden;
  margin-top: 4px;
  color: #99999d;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.result-tag {
  flex: 0 0 auto;
  color: #a8a8ab;
  font-size: 10px;
  border: 1px solid #3f3f42;
  border-radius: 5px;
  padding: 3px 5px;
}
.chat-avatar {
  overflow: hidden;
  background: linear-gradient(145deg, #2c6bd4, #16294d);
  color: #faf5ec;
  font-size: 11px;
  letter-spacing: 0.02em;
}
.chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chat-end {
  align-self: stretch;
  display: flex;
  flex: 0 0 48px;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  padding: 2px 0;
  color: #99999d;
  font-size: 10px;
}
.chat-end time {
  white-space: nowrap;
}
.chat-end b {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--primary);
  color: #0e2240;
  font-size: 9px;
}
.compose {
  margin-top: 15px;
  padding: 15px;
  border-radius: 14px;
  border: 1px solid #3d3d40;
  background: #202022;
}
.compose .compose-label {
  color: #a0a0a3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.compose h2 {
  font-size: 18px;
  margin: 8px 0 7px;
  letter-spacing: -0.03em;
}
.compose p {
  margin: 0;
  color: #b4b4b6;
  font-size: 13px;
  line-height: 1.5;
}
.compose-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.primary,
.secondary {
  border: 0;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 700;
}
.primary {
  color: #0e2240;
  background: var(--lime);
}
.secondary {
  color: #d5d5d7;
  background: #343437;
}
.skill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.skill {
  padding: 14px;
  border: 1px solid #363638;
  border-radius: 12px;
  background: #202022;
}
.skill h3 {
  font-size: 13px;
  margin: 7px 0 4px;
}
.skill p {
  color: #97979a;
  font-size: 11px;
  margin: 0;
  line-height: 1.35;
}
.skill-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  color: #aaa;
  font-size: 10px;
}
.permission {
  color: var(--lime);
}
#toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 15px);
  opacity: 0;
  pointer-events: none;
  padding: 10px 14px;
  border: 1px solid #48484b;
  border-radius: 10px;
  background: #28282a;
  color: #e8e8e9;
  font-size: 12px;
  transition: 0.2s;
  box-shadow: 0 12px 30px #0008;
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.verified {
  color: var(--lime) !important;
}
.conversation-mode {
  margin-bottom: 18px;
}
.chat-client {
  display: flex;
  flex-direction: column;
  height: min(420px, calc(100vh - 360px));
  min-height: 300px;
}
.chat-title {
  flex: 0 0 auto;
  padding: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-title .icon {
  width: 39px;
  height: 39px;
}
.chat-title .chat-avatar {
  object-fit: cover;
}
.chat-title b {
  display: block;
  font-size: 16px;
  letter-spacing: -0.025em;
}
.chat-title small {
  display: block;
  margin-top: 3px;
  color: #96969a;
  font-size: 10px;
}
.history-button {
  margin-left: auto;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #c4c4c7;
  font-size: 10px;
}
.history-button:hover {
  color: var(--lime);
  background: #28282a;
}
.chat-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 12px;
  color: #858589;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.chat-notice span {
  height: 1px;
  flex: 1;
  background: #303033;
}
.chat-notice b {
  color: #929296;
  font-size: 9px;
  white-space: nowrap;
}
.messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 8px 18px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent;
  scrollbar-width: thin;
  scrollbar-color: #4a4a4d transparent;
}
.message {
  max-width: 80%;
  padding: 8px 9px 5px;
  border-radius: 9px;
  font-size: 12px;
  line-height: 1.35;
}
.message span {
  display: block;
}
.message time {
  display: block;
  margin-top: 3px;
  color: #9a9a9c;
  font-size: 9px;
  text-align: right;
}
.incoming {
  align-self: flex-start;
  background: #303033;
  border-bottom-left-radius: 2px;
}
.outgoing {
  align-self: flex-end;
  background: #2c6bd4;
  border-bottom-right-radius: 2px;
}
.chat-composer {
  flex: 0 0 auto;
  margin: 0 -25px;
  padding: 13px 25px 14px;
  border-top: 1px solid #333336;
  background: #1d1d1f;
}
.chat-composer textarea {
  width: 100%;
  resize: none;
  outline: 0;
  min-height: 49px;
  padding: 9px 10px;
  border: 1px solid #3f3f42;
  border-radius: 8px;
  background: #18181a;
  color: #ededee;
  font: 12px/1.4 inherit;
}
.chat-composer > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 2px 0;
  color: #969699;
  font-size: 10px;
}
.chat-composer .primary {
  padding: 7px 10px;
}
.chat-composer kbd {
  margin-left: 3px;
  font-size: 8px;
  color: #0e2240;
  border-color: var(--primary);
  background: transparent;
  box-shadow: none;
}
.mail-compose {
  margin: 0 -25px -22px;
  background: #1d1d1f;
}
.mail-line {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 47px;
  padding: 0 25px;
  border-bottom: 1px solid #303033;
}
.mail-line span {
  width: 47px;
  color: #97979b;
  font-size: 11px;
}
.mail-line input {
  font-size: 13px;
}
.mail-body {
  width: 100%;
  min-height: 118px;
  padding: 16px 25px;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: #eee;
  font: 13px/1.5 inherit;
}
.attachment-zone {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 25px;
  padding: 11px;
  border: 1px dashed #4a4a4e;
  border-radius: 9px;
  color: #aaa;
  transition: 0.15s;
}
.attachment-zone.drag-over {
  border-color: var(--lime);
  background: #16294d;
}
.attachment-zone .icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}
.attachment-zone b,
.attachment-zone small {
  display: block;
}
.attachment-zone b {
  font-size: 11px;
  color: #d0d0d2;
}
.attachment-zone small {
  margin-top: 2px;
  color: #8e8e92;
  font-size: 10px;
}
.attachment-list {
  margin: 10px 25px 0;
}
.attachment:empty {
  display: none;
}
.attachment {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border-radius: 8px;
  background: #29292b;
}
.attachment .icon {
  width: 29px;
  height: 29px;
  border-radius: 7px;
}
.attachment b,
.attachment small {
  display: block;
}
.attachment b {
  font-size: 11px;
}
.attachment small {
  margin-top: 2px;
  color: #99999c;
  font-size: 10px;
}
.attachment button {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #a4a4a7;
  font-size: 18px;
}
.mail-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding: 12px 25px 14px;
  border-top: 1px solid #303033;
  color: #96969a;
  font-size: 10px;
}
.mail-actions .primary {
  padding: 7px 10px;
}
.mail-actions kbd {
  margin-left: 3px;
  font-size: 8px;
  color: #0e2240;
  border-color: var(--primary);
  background: transparent;
  box-shadow: none;
}
.event-draft {
  margin: 0 -25px -22px;
  padding: 0 25px 16px;
  background: #1d1d1f;
}
.event-title {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 72px;
  border-bottom: 1px solid #303033;
}
.event-title .icon {
  width: 38px;
  height: 38px;
}
.event-title input {
  font-size: 16px;
  font-weight: 620;
}
.event-field {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  border-bottom: 1px solid #303033;
}
.event-field label {
  width: 62px;
  color: #99999c;
  font-size: 11px;
}
.event-field input,
.event-field select {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #eee;
  font: 12px inherit;
}
.event-field select {
  appearance: auto;
}
.event-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 14px 0;
  color: #959599;
  font-size: 10px;
}
.event-note svg {
  width: 14px;
  color: var(--lime);
}
.event-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.event-actions kbd {
  margin-left: 3px;
  font-size: 8px;
  color: #0e2240;
  border-color: var(--primary);
  background: transparent;
  box-shadow: none;
}
.agenda-list {
  display: grid;
  gap: 5px;
}
.agenda-event {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 61px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  text-align: left;
}
.agenda-event:hover {
  border-color: #5d5d61;
  background: #29292b;
}
.agenda-event .icon {
  width: 33px;
  height: 33px;
  border-radius: 8px;
}
.agenda-event b,
.agenda-event small {
  display: block;
}
.agenda-event b {
  font-size: 13px;
}
.agenda-event small {
  margin-top: 3px;
  color: #97979b;
  font-size: 10px;
}
.agenda-event > i,
.agenda-event > svg {
  width: 15px;
  margin-left: auto;
  color: #8e8e92;
}
.agent-dock {
  display: grid;
  gap: 6px;
}
.agent-session {
  display: grid;
  grid-template-columns: 35px 1fr 18px;
  align-items: start;
  gap: 10px;
  width: 100%;
  padding: 11px;
  border: 1px solid #37373a;
  border-radius: 11px;
  background: #202022;
  text-align: left;
}
.agent-session:hover {
  border-color: #646468;
  background: #29292b;
}
.agent-session .icon {
  width: 35px;
  height: 35px;
  border-radius: 9px;
}
.agent-session b,
.agent-session small {
  display: block;
}
.agent-session b {
  font-size: 13px;
}
.agent-session small {
  margin-top: 3px;
  color: #9a9a9d;
  font-size: 10px;
}
.agent-session code {
  display: block;
  max-width: 100%;
  margin-top: 7px;
  overflow: hidden;
  color: #a9a9ac;
  font:
    10px/1.35 'JetBrains Mono',
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-session > svg {
  width: 15px;
  margin-top: 3px;
  color: #88888c;
}
.back-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #e1e1e3;
  font-size: 13px;
  font-weight: 650;
}
.back-button svg {
  width: 14px;
}
.agent-detail {
  padding: 4px 0;
}
.agent-detail-title {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 18px;
}
.agent-detail-title .icon {
  width: 42px;
  height: 42px;
}
.agent-detail-title b,
.agent-detail-title small {
  display: block;
}
.agent-detail-title b {
  font-size: 16px;
}
.agent-detail-title small {
  margin-top: 3px;
  color: #99999c;
  font-size: 10px;
}
.agent-context {
  padding: 10px 0;
  border-top: 1px solid #343437;
}
.agent-context span {
  display: block;
  margin-bottom: 5px;
  color: #87878a;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.agent-context code {
  display: block;
  overflow: hidden;
  color: #c0c0c3;
  font:
    11px/1.35 'JetBrains Mono',
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-detail-actions {
  display: flex;
  gap: 8px;
  margin-top: 17px;
}
.agent-detail-actions button {
  display: flex;
  align-items: center;
  gap: 6px;
}
.agent-detail-actions svg {
  width: 14px;
}
.agent-disclaimer {
  margin: 13px 0 0;
  color: #8f8f93;
  font-size: 10px;
  line-height: 1.4;
}
.terminal-shell {
  margin: 0 -25px -22px;
  overflow: hidden;
  border-top: 1px solid #343437;
  background: #161617;
}
.terminal-shell header,
.terminal-shell footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  color: #aaa;
  font-size: 10px;
}
.terminal-shell header {
  border-bottom: 1px solid #343437;
}
.terminal-shell header span {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.terminal-shell header svg {
  width: 14px;
}
.terminal-shell header button {
  border: 1px solid #4b4b4f;
  border-radius: 6px;
  background: #2a2a2d;
  color: #d0d0d2;
  padding: 5px 7px;
  font-size: 10px;
}
.terminal-shell header button:hover {
  border-color: #77777c;
}
.terminal-shell footer {
  border-top: 1px solid #343437;
  color: #929296;
}
.terminal-shell footer kbd {
  font-size: 8px;
}
.terminal-shell footer span:last-child {
  color: var(--primary);
}
#terminal-host {
  height: 420px;
  padding: 10px 7px;
  background: #161617;
}
#terminal-host .xterm {
  height: 100%;
}
#drop-dock {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #4a4a4e;
  border-radius: 12px;
  background: #29292cec;
  box-shadow: 0 16px 40px #0009;
  color: #aaa;
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 22px);
  transition: 0.15s;
}
.dragging #drop-dock,
#drop-dock.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
#drop-dock button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px 5px 5px;
  border: 1px solid #55555a;
  border-radius: 8px;
  background: #333336;
  font-size: 11px;
}
#drop-dock .icon {
  width: 25px;
  height: 25px;
  border-radius: 6px;
  font-size: 11px;
}
#quick-preview {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 44px;
  background: rgba(7, 7, 8, 0.68);
  backdrop-filter: blur(8px);
}
.preview-dialog {
  width: min(860px, 100%);
  height: min(720px, calc(100vh - 88px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #4a4a4d;
  border-radius: 16px;
  background: #1c1c1e;
  box-shadow: 0 30px 90px #000b;
}
.preview-dialog header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #343437;
}
.preview-dialog header .icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}
.preview-dialog header b,
.preview-dialog header small {
  display: block;
}
.preview-dialog header b {
  font-size: 13px;
}
.preview-dialog header small {
  margin-top: 3px;
  color: #99999c;
  font-size: 10px;
}
.preview-dialog header button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: auto;
  border: 0;
  border-radius: 7px;
  background: #303033;
  color: #c9c9cb;
}
.preview-dialog header button:hover {
  background: #414145;
}
.preview-dialog header button svg {
  width: 16px;
}
.preview-dialog iframe {
  flex: 1;
  width: 100%;
  border: 0;
  background: #303033;
}
.preview-dialog footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid #343437;
  color: #99999c;
  font-size: 10px;
}
.preview-dialog footer .secondary {
  padding: 6px 9px;
  font-size: 10px;
}
#update-dialog {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 30px;
  background: rgba(4, 13, 27, 0.5);
  backdrop-filter: blur(10px);
}
.update-dialog-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  width: min(430px, 100%);
  padding: 17px;
  border: 1px solid rgba(108, 170, 255, 0.42);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 24px 80px rgba(0, 7, 20, 0.56);
}
.update-dialog-card .icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
}
.update-dialog-card h2 {
  margin: 4px 0 5px;
  font-size: 16px;
  letter-spacing: -0.025em;
}
.update-dialog-card p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.update-dialog-actions {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
}
.update-dialog-actions .primary,
.update-dialog-actions .secondary {
  padding: 7px 10px;
  font-size: 11px;
}
.history-divider {
  width: 100%;
  margin: 3px 0 1px;
  color: #89898d;
  font-size: 9px;
  text-align: center;
}
@media (max-width: 600px) {
  .shell {
    padding: 0;
    place-items: stretch;
  }
  .command-card {
    border-radius: 0;
    min-height: 100vh;
  }
  .quick-grid,
  .skill-grid {
    grid-template-columns: 1fr;
  }
  .connection-row {
    grid-template-columns: 1fr 1fr;
  }
  .status {
    display: none;
  }
  .content {
    padding: 24px 18px;
  }
  .topbar,
  .search-row,
  footer {
    padding-left: 18px;
    padding-right: 18px;
  }
}
html.native-host,
body.native-host {
  min-height: 0;
  background: transparent;
}
.native-host .shell {
  min-height: 0;
  height: 100vh;
  padding: 0;
  place-items: stretch;
  background: transparent;
}
.native-host .command-card {
  width: 100%;
  height: 100vh;
  max-height: none;
  border-color: rgba(80, 145, 253, 0.28);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(15, 43, 76, 0.72), rgba(3, 16, 32, 0.76));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(28px) saturate(130%);
}
body[data-theme='graphite'] {
  --bg: #111418;
  --card: rgba(26, 30, 35, 0.94);
  --line: rgba(210, 220, 230, 0.14);
  --muted: rgba(225, 231, 237, 0.55);
  --ink: rgba(246, 248, 250, 0.94);
  --primary: #b9c9db;
  --primary-deep: #51687e;
  --surface: rgba(32, 38, 45, 0.82);
  --surface-raised: rgba(45, 52, 61, 0.92);
  background:
    radial-gradient(900px 580px at 8% -12%, rgba(190, 205, 222, 0.1), transparent 62%),
    linear-gradient(155deg, #15191e, #0a0d11 100%);
}
.settings-view {
  max-width: 600px;
}
.settings-section {
  display: grid;
  gap: 7px;
  margin: 18px 0;
}
.settings-options {
  display: grid;
  gap: 6px;
}
.settings-note {
  color: #9db2c9;
  font-size: 10px;
}
.message.sending {
  opacity: 0.72;
}
.message.failed {
  background: #5a2d2e;
}
.thinking {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b5b5b9;
}
.message {
  position: relative;
}
.copy-message {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 6px -2px -1px auto;
  padding: 3px 4px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #aaaab0;
  font-size: 9px;
  opacity: 0;
  transition:
    opacity 0.12s,
    background 0.12s;
}
.message.incoming:hover .copy-message,
.copy-message:focus {
  opacity: 1;
}
.copy-message:hover,
.copy-message:focus {
  outline: 0;
  background: #414145;
  color: #f0f0f1;
}
.copy-message svg {
  width: 11px;
  height: 11px;
}
.composer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.composer-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #444448;
  border-radius: 7px;
  background: #29292b;
  color: #c5c5c8;
}
.composer-icon:hover,
.composer-icon:focus {
  outline: 0;
  border-color: var(--primary);
  color: var(--primary);
}
.composer-icon:disabled {
  opacity: 0.45;
}
.composer-icon svg {
  width: 14px;
  height: 14px;
}
.chat-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 8px;
}
.chat-attachments:empty {
  display: none;
}
.chat-attachment {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  padding: 4px 5px;
  border: 1px solid #414145;
  border-radius: 7px;
  background: #252527;
}
.chat-attachment i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  overflow: hidden;
  border-radius: 4px;
  background: #343438;
  color: var(--primary);
}
.chat-attachment i svg {
  width: 13px;
}
.chat-attachment i img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chat-attachment b {
  overflow: hidden;
  color: #dedee0;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-attachment button {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: auto;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #aaaab0;
}
.chat-attachment button:hover,
.chat-attachment button:focus {
  background: #414145;
  color: #fff;
  outline: 0;
}
.chat-attachment button svg {
  width: 12px;
}
.agent-proposal {
  display: grid;
  grid-template-columns: 31px 1fr auto;
  align-items: center;
  gap: 9px;
  margin: 5px 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}
.agent-proposal .icon {
  width: 31px;
  height: 31px;
  border-radius: 7px;
}
.agent-proposal b,
.agent-proposal small {
  display: block;
}
.agent-proposal b {
  color: #edffe4;
  font-size: 11px;
}
.agent-proposal small {
  margin-top: 3px;
  color: #b4bbaa;
  font-size: 9px;
  line-height: 1.35;
}
.agent-proposal button {
  padding: 6px 8px;
  border: 1px solid var(--primary);
  border-radius: 6px;
  background: var(--primary);
  color: #0e2240;
  font-size: 10px;
  font-weight: 700;
}
.agent-proposal button:focus {
  outline: 2px solid #9dc8ff;
  outline-offset: 2px;
}
.agent-proposal button:disabled {
  opacity: 0.55;
}
.agent-file-results {
  display: grid;
  gap: 5px;
  width: min(100%, 620px);
  margin: 2px 0 8px;
}
.agent-file {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 49px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
  color: var(--ink);
  text-align: left;
  cursor: grab;
}
.agent-file:active {
  cursor: grabbing;
}
.agent-file:hover,
.agent-file:focus-visible {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  outline: 0;
}
.agent-file .icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}
.agent-file b,
.agent-file small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-file b {
  font-size: 11px;
}
.agent-file small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}
.agent-file > i {
  color: var(--muted);
}
.agent-file > i svg {
  width: 13px;
}
.agent-file-results--visual {
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 8px;
  width: min(100%, 650px);
}
.agent-file-results--visual .agent-file {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-height: 0;
  padding: 6px;
  overflow: hidden;
}
.agent-file-results--visual .agent-file-thumbnail {
  display: block;
  width: 100%;
  aspect-ratio: 1.55;
  object-fit: cover;
  border-radius: 6px;
  background: var(--surface);
}
.agent-file-results--visual .agent-file > span:nth-child(2) {
  min-width: 0;
}
.agent-file-results--visual .agent-file small {
  display: none;
}
.agent-file-results--visual .agent-file > i {
  position: absolute;
  top: 9px;
  right: 9px;
  padding: 3px;
  border-radius: 5px;
  color: white;
  background: rgba(0, 0, 0, 0.48);
  opacity: 0;
  transition: opacity 0.12s ease;
}
.agent-file-results--visual .agent-file:hover > i,
.agent-file-results--visual .agent-file:focus-visible > i {
  opacity: 1;
}
.agent-trace {
  width: min(100%, 620px);
  margin: 1px 0 6px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  color: var(--muted);
  font-size: 10px;
}
.agent-trace summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  cursor: pointer;
  list-style: none;
}
.agent-trace summary::-webkit-details-marker {
  display: none;
}
.agent-trace summary > svg {
  width: 13px;
  color: var(--primary);
}
.agent-trace summary span {
  margin-left: auto;
  color: var(--muted);
  font-size: 9px;
}
.agent-trace ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0 9px 9px;
  list-style: none;
}
.agent-trace li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 6px;
}
.agent-trace li > span:first-child {
  color: var(--primary);
}
.agent-trace li svg {
  width: 12px;
}
.agent-trace b,
.agent-trace small {
  display: block;
}
.agent-trace b {
  color: var(--ink);
  font-size: 10px;
}
.agent-trace small {
  margin-top: 1px;
  font-size: 9px;
  line-height: 1.35;
}
.habibi-chat .message.incoming {
  max-width: 88%;
  padding: 11px 12px 7px;
  border: 1px solid #3a3a3d;
  background: #303033;
}
.habibi-chat .message.outgoing {
  padding: 9px 10px 6px;
}
.message-body {
  color: #f0f0f2;
}
.message-body p {
  margin: 0 0 8px;
}
.message-body p:last-child {
  margin-bottom: 0;
}
.message-body h3 {
  margin: 1px 0 8px;
  color: #b2cfff;
  font-size: 12px;
  letter-spacing: -0.01em;
}
.message-body ul,
.message-body ol {
  margin: 6px 0 8px 17px;
  padding: 0;
}
.message-body li {
  margin: 4px 0;
  padding-left: 2px;
}
.message-body strong {
  color: #d6e6ff;
  font-weight: 700;
}
.message-body em {
  color: #e1e1e4;
}
.message-body code {
  padding: 1px 4px;
  border: 1px solid #49494d;
  border-radius: 4px;
  background: #202022;
  color: #b2cfff;
  font:
    10px 'JetBrains Mono',
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.provider-setup {
  max-width: 560px;
}
.provider-options {
  display: grid;
  gap: 6px;
  margin: 5px 0 12px;
}
.provider-option {
  display: grid;
  grid-template-columns: 1fr auto 14px;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #202022;
  color: #e7e7e9;
  text-align: left;
}
.provider-option:hover,
.provider-option.selected {
  border-color: #636367;
  background: #29292b;
}
.provider-option b,
.provider-option small {
  display: block;
}
.provider-option b {
  font-size: 12px;
}
.provider-option small {
  margin-top: 3px;
  color: #99999d;
  font-size: 10px;
}
.provider-option em {
  color: var(--primary);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.provider-option i,
.provider-option svg {
  width: 14px;
  color: #939397;
}
.provider-option.selected i {
  color: var(--primary);
}
.provider-detail {
  padding: 14px;
  border: 1px solid #49494d;
  border-radius: 11px;
  background: #1c1c1e;
  animation: provider-detail-in 0.16s ease-out;
}
.provider-detail-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}
.provider-detail-title b {
  font-size: 13px;
}
.provider-detail-title span {
  color: #99999d;
  font-size: 10px;
}
.provider-fields {
  display: grid;
  gap: 10px;
}
.provider-fields label {
  display: grid;
  gap: 5px;
  color: #aaaab0;
  font-size: 10px;
  font-weight: 650;
}
.provider-fields input {
  width: 100%;
  min-height: 39px;
  padding: 8px 9px;
  border: 1px solid #3f3f43;
  border-radius: 7px;
  outline: 0;
  background: #18181a;
  color: #eeeeef;
  font: 12px inherit;
}
.provider-fields input:focus {
  border-color: #97c8ff;
  box-shadow: 0 0 0 1px #97c8ff;
}
.provider-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  color: #99999d;
  font-size: 10px;
}
.provider-actions .primary {
  display: flex;
  align-items: center;
  gap: 6px;
}
.provider-actions .mini-spinner {
  display: inline-block;
}
@keyframes provider-detail-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.message.has-media {
  min-width: 145px;
  padding: 5px 6px 4px;
}
.media-card {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 170px;
  border-radius: 7px;
  color: #f2f2f3;
  overflow: hidden;
}
.provider-detail {
  margin: 6px 0;
}
.model-combobox {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 38px;
}
.model-combobox input {
  border-radius: 7px 0 0 7px;
}
.model-combobox > button {
  display: grid;
  place-items: center;
  border: 1px solid #3f3f43;
  border-left: 0;
  border-radius: 0 7px 7px 0;
  background: #242426;
  color: #e4e4e6;
}
.model-combobox > button:focus {
  outline: 1px solid #97c8ff;
  outline-offset: -2px;
}
.model-combobox svg {
  width: 15px;
}
.model-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  max-height: 174px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid #5a5a5f;
  border-radius: 8px;
  background: #252527;
  box-shadow: 0 12px 30px #000a;
}
.model-menu button {
  display: block;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #eeeeef;
  font:
    11px 'JetBrains Mono',
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  text-align: left;
}
.model-menu button:hover,
.model-menu button:focus {
  outline: 0;
  background: #3a3a3d;
}
.provider-detail .active-model-label {
  align-self: start;
  padding: 2px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
  font-size: 9px;
  font-style: normal;
  letter-spacing: 0.05em;
}
.provider-fields input.active-model-input {
  border-color: var(--primary);
  box-shadow: inset 3px 0 var(--primary);
}
.model-menu button.active-model-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: color-mix(in srgb, var(--primary) 13%, transparent);
  color: var(--ink);
}
.model-menu button.active-model-option em {
  flex: 0 0 auto;
  color: var(--primary);
  font: 700 9px inherit;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.model-empty {
  display: block;
  padding: 8px;
  color: #9d9da1;
  font-size: 10px;
}
.media-card .media-glyph {
  display: grid;
  place-items: center;
  flex: 0 0 31px;
  width: 31px;
  height: 31px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--primary);
}
.media-card .media-glyph i {
  width: 17px;
  height: 17px;
}
.media-card b,
.media-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-card b {
  font-size: 11px;
}
.media-card small {
  margin-top: 3px;
  color: #b0b0b4;
  font-size: 9px;
}
.document-media {
  padding: 7px;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.16);
}
.document-media:hover {
  background: rgba(255, 255, 255, 0.1);
}
.image-media {
  display: block;
  min-width: 0;
  max-width: 280px;
  background: #151516;
}
.image-media img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
}
.video-media {
  display: block;
  min-width: 210px;
  background: #151516;
}
.video-media video {
  display: block;
  width: 100%;
  max-height: 190px;
  background: #0c0c0d;
}
.video-media > span {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  color: #c5c5c8;
  font-size: 9px;
}
.video-media i {
  width: 12px;
  height: 12px;
}
.audio-media {
  padding: 7px;
  min-width: 210px;
  background: rgba(0, 0, 0, 0.16);
}
.audio-media audio {
  width: 165px;
  height: 30px;
}
.generic-media {
  padding: 7px;
  background: rgba(0, 0, 0, 0.16);
}

.browser-search {
  position: relative;
  padding-left: 66px;
}
.browser-search > .icon {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(80, 145, 253, 0.14);
  color: var(--primary);
}
.browser-search-note {
  display: block;
  margin-top: 12px;
  color: #a8c5e4;
  font-size: 10px;
}
.mail-onboarding {
  max-width: 540px;
  padding: 10px 0 18px;
}
.mail-onboarding .openwa-intro {
  margin-bottom: 18px;
}
.mail-onboarding h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.03em;
}
.mail-onboarding p {
  margin: 5px 0 0;
  color: #a9c3df;
  font-size: 12px;
  line-height: 1.45;
}
.mail-provider-options {
  margin: 0;
}
.mail-provider-options .provider-option b {
  display: flex;
  align-items: center;
  gap: 7px;
}
.mail-provider-options .provider-option b svg {
  width: 14px;
  color: #9fcaff;
}
.mail-settings-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mail-settings-actions .secondary {
  padding: 6px 8px;
  font-size: 10px;
}
.mail-message {
  max-width: 92%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.mail-message-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 10px 0 4px;
}
.mail-message-attachments span {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 5px 6px;
  border: 1px solid rgba(80, 145, 253, 0.22);
  border-radius: 6px;
  background: rgba(3, 14, 29, 0.35);
  color: #c8ddf5;
  font-size: 10px;
}
.mail-message-attachments svg {
  width: 12px;
}
.mail-message {
  width: min(92%, 660px);
  padding: 10px 12px 7px;
}
.mail-message-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}
.mail-sender {
  display: block;
  color: #9ecaff;
  font-size: 10px;
  font-weight: 700;
}
.mail-address {
  overflow: hidden;
  color: #8da5bf;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-body {
  overflow-wrap: anywhere;
}
.mail-body p {
  margin: 0 0 10px;
}
.mail-body p:last-child {
  margin-bottom: 0;
}
.outgoing .mail-sender {
  color: #dff0ff;
}
.outgoing .mail-address {
  color: rgba(241, 248, 255, 0.68);
}
.mail-html {
  color: inherit;
  font-size: 12px;
  line-height: 1.42;
}
.mail-html * {
  max-width: 100%;
  color: inherit !important;
  font-family: inherit !important;
  line-height: inherit !important;
}
.mail-html > :first-child {
  margin-top: 0;
}
.mail-html > :last-child {
  margin-bottom: 0;
}
.mail-html div,
.mail-html p {
  min-height: 0 !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
}
.mail-html div:empty,
.mail-html p:empty {
  display: none;
}
.mail-html table {
  max-width: 100%;
  border-collapse: collapse;
}
.mail-html td,
.mail-html th {
  padding: 1px 4px;
  vertical-align: top;
}
.mail-html a {
  color: #a9d2ff !important;
  text-decoration: underline;
}
.mail-html blockquote {
  margin: 6px 0;
  padding-left: 8px;
  border-left: 2px solid rgba(80, 145, 253, 0.35);
  color: #b4c8df;
}
.mail-html ul,
.mail-html ol {
  margin: 4px 0 6px 16px;
  padding: 0;
}
.mail-html img,
.mail-html iframe,
.mail-html form {
  display: none;
}
.forwarded-message {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 9px 0 3px;
  padding: 7px 8px;
  border: 1px solid rgba(80, 145, 253, 0.28);
  border-radius: 7px;
  background: rgba(3, 14, 29, 0.28);
  color: #c7def8;
}
.forwarded-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(80, 145, 253, 0.16);
  color: #a9d2ff;
}
.forwarded-icon svg {
  width: 13px;
  height: 13px;
}
.forwarded-message b,
.forwarded-message small {
  display: block;
}
.forwarded-message b {
  font-size: 10px;
}
.forwarded-message small {
  max-width: 400px;
  margin-top: 2px;
  overflow: hidden;
  color: #9ab5d2;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Clidey brand — Ink world (default theme)
   Deep navy ground, lifted-blue action states, Beacon Yellow reserved for one
   highlight. App/service icons retain their native colour so WhatsApp and
   Gmail remain instantly recognisable. Values from the Clidey brand kit. */
:root {
  --bg: #0e2240;
  --card: rgba(22, 43, 74, 0.94);
  --line: rgba(250, 245, 236, 0.14);
  --muted: #9ba5b3;
  --ink: #faf5ec;
  --primary: #5091fd;
  --primary-deep: #2c6bd4;
  --accent: #ffc233;
  --surface: rgba(22, 43, 74, 0.8);
  --surface-raised: rgba(29, 49, 81, 0.9);
  --radius: 18px;
}

body {
  background: var(--bg);
  letter-spacing: -0.01em;
}

.command-card {
  border-color: rgba(80, 145, 253, 0.24);
  border-radius: var(--radius);
  background: rgba(14, 34, 64, 0.96);
  box-shadow:
    0 28px 80px rgba(0, 7, 20, 0.58),
    0 0 0 1px rgba(80, 145, 253, 0.035) inset;
}

.topbar,
.search-row,
footer,
.home-divider,
.inline-section,
.chat-composer,
.mail-actions,
.event-title,
.event-field,
.terminal-shell,
.terminal-shell header,
.terminal-shell footer {
  border-color: var(--line);
}

.brand {
  color: #f4f9ff;
}
.spark {
  color: var(--primary);
}
.local-dot {
  background: rgba(80, 145, 253, 0.12);
  color: #b9d8fc;
}
.status {
  color: rgba(225, 238, 253, 0.72);
}
.live-dot,
.connection i {
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(80, 145, 253, 0.12);
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-color: var(--primary);
}

kbd {
  border-color: rgba(80, 145, 253, 0.28);
  border-bottom-color: rgba(80, 145, 253, 0.18);
  background: rgba(80, 145, 253, 0.09);
  color: #d8eaff;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}
.search-icon {
  color: #b9d8fc;
}
input::placeholder {
  color: rgba(208, 225, 246, 0.52);
}

.content {
  scrollbar-color: rgba(80, 145, 253, 0.42) transparent;
}
.content::-webkit-scrollbar-thumb,
.messages::-webkit-scrollbar-thumb {
  background-color: rgba(80, 145, 253, 0.42);
}
.spinner,
.mini-spinner {
  border-color: rgba(80, 145, 253, 0.22);
  border-top-color: var(--primary);
}
.eyebrow,
.section-heading,
.agenda-home-header {
  color: #95bfe8;
}

.quick-action,
.connection,
.skill,
.compose,
.provider-option {
  border-color: rgba(80, 145, 253, 0.14);
  background: var(--surface);
}
.quick-action:hover,
.result:hover,
.provider-option:hover,
.provider-option.selected {
  border-color: rgba(80, 145, 253, 0.45);
  background: var(--surface-raised);
}
.result.selected {
  border-color: var(--primary);
  background: rgba(80, 145, 253, 0.13);
  box-shadow: inset 3px 0 var(--primary);
}
.result-tag {
  border-color: rgba(80, 145, 253, 0.28);
  color: #c5dffb;
}
.result-title {
  color: #f4f9ff;
}
.result-meta {
  color: rgba(218, 233, 250, 0.62);
}

.glance-event.next {
  background: linear-gradient(90deg, rgba(80, 145, 253, 0.16), rgba(80, 145, 253, 0.035));
  box-shadow: inset 3px 0 var(--primary);
}
.agenda-home-header button:hover,
.proactive-footnote button:hover,
.history-button:hover {
  color: var(--primary);
}

.primary {
  background: var(--primary);
  color: #0e2240;
}
.secondary {
  background: rgba(80, 145, 253, 0.13);
  color: #e5f0ff;
}
.secondary:hover {
  background: rgba(80, 145, 253, 0.2);
}
.permission,
.verified,
.provider-option em {
  color: var(--primary) !important;
}

.chat-client,
.messages {
  scrollbar-color: rgba(80, 145, 253, 0.42) transparent;
}
.incoming,
.habibi-chat .message.incoming {
  border-color: rgba(80, 145, 253, 0.13);
  background: rgba(30, 55, 86, 0.72);
}
.outgoing,
.habibi-chat .message.outgoing {
  background: #2c6bd4;
  color: #f5f9ff;
}
.outgoing time {
  color: rgba(241, 248, 255, 0.66);
}
.chat-composer,
.mail-compose,
.event-draft {
  background: rgba(5, 18, 35, 0.82);
}
.chat-composer textarea,
.provider-fields input,
.model-combobox > button {
  border-color: rgba(80, 145, 253, 0.25);
  background: rgba(3, 13, 27, 0.72);
}
.chat-composer textarea:focus,
.provider-fields input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.agent-proposal {
  border-color: rgba(80, 145, 253, 0.34);
  background: rgba(44, 107, 212, 0.2);
}
.agent-proposal .icon {
  background: rgba(80, 145, 253, 0.16);
  color: var(--primary);
}
.agent-proposal b {
  color: #e8f3ff;
}
.agent-proposal small {
  color: #b6d1ec;
}
.agent-proposal button {
  border-color: rgba(80, 145, 253, 0.5);
  background: var(--primary);
  color: #0e2240;
}

.provider-detail,
.model-menu {
  border-color: rgba(80, 145, 253, 0.24);
  background: rgba(7, 23, 43, 0.97);
}
.model-menu button:hover,
.model-menu button:focus {
  background: rgba(80, 145, 253, 0.15);
}
.message-body h3,
.message-body strong,
.message-body code {
  color: #b9dcff;
}
.message-body code {
  border-color: rgba(80, 145, 253, 0.25);
  background: rgba(3, 14, 29, 0.72);
}

#toast {
  border-color: rgba(80, 145, 253, 0.32);
  background: rgba(12, 31, 56, 0.96);
  color: #e9f3ff;
  box-shadow: 0 12px 30px rgba(0, 7, 20, 0.55);
}

/* Keep the lightweight prompt chips in the same visual family as the rest of
   the Whodb surface. This sits after the legacy launcher rules intentionally. */
.quick-samples > span {
  color: #95bfe8;
}
.quick-samples button {
  border-color: rgba(80, 145, 253, 0.28);
  background: rgba(22, 43, 74, 0.42);
  color: #c9e1fb;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.045);
}
.quick-samples button:hover,
.quick-samples button:focus-visible {
  border-color: var(--primary);
  background: rgba(80, 145, 253, 0.16);
  color: #f2f8ff;
  outline: 0;
}
body[data-theme='graphite'] .quick-samples > span {
  color: rgba(225, 231, 237, 0.5);
}
body[data-theme='graphite'] .quick-samples button {
  border-color: rgba(210, 220, 230, 0.18);
  background: rgba(45, 52, 61, 0.72);
  color: #d4deea;
}
body[data-theme='graphite'] .quick-samples button:hover,
body[data-theme='graphite'] .quick-samples button:focus-visible {
  border-color: #b9c9db;
  background: rgba(185, 201, 219, 0.16);
  color: #fff;
}

/* Settings: compact visual theme chooser and native shortcut recorder. */
.theme-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.theme-card {
  position: relative;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 82px;
  padding: 8px;
  border: 1px solid rgba(80, 145, 253, 0.16);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  transition:
    border-color 0.15s,
    background 0.15s,
    transform 0.15s;
}
.theme-card:hover,
.theme-card:focus-visible,
.theme-card.selected {
  border-color: var(--primary);
  background: var(--surface-raised);
  outline: 0;
}
.theme-card:hover {
  transform: translateY(-1px);
}
.theme-card > span:last-of-type {
  min-width: 0;
}
.theme-card b,
.theme-card small {
  display: block;
}
.theme-card b {
  color: #edf6ff;
  font-size: 11px;
}
.theme-card small {
  margin-top: 3px;
  color: #9fb9d5;
  font-size: 9px;
  line-height: 1.3;
}
.theme-check {
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--primary);
  color: #0e2240;
}
.theme-check svg {
  width: 11px;
}
.theme-thumb {
  position: relative;
  display: block;
  width: 66px;
  height: 52px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  background: linear-gradient(145deg, var(--theme-base), var(--theme-surface));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.13);
}
.theme-thumb::before {
  content: '';
  position: absolute;
  width: 54px;
  height: 54px;
  top: -29px;
  left: 28px;
  border-radius: 50%;
  background: var(--theme-ink);
  filter: blur(16px);
  opacity: 0.45;
}
.theme-thumb i {
  position: absolute;
  top: 9px;
  left: 8px;
  width: 27px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.78);
}
.theme-thumb b {
  position: absolute;
  top: 20px;
  left: 8px;
  right: 8px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.15);
}
.theme-thumb b::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 60%;
  height: 3px;
  border-radius: 3px;
  background: var(--theme-ink);
}
.theme-thumb em {
  position: absolute;
  bottom: 7px;
  left: 8px;
  width: 17px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.5);
}
.theme-aurora-glass {
  backdrop-filter: blur(8px);
  background: linear-gradient(145deg, #10223b99, #4c3a7baa);
}
.theme-forest-moss {
  background: linear-gradient(145deg, #0d1914, #274b38);
}
.theme-solar-gold {
  background: linear-gradient(145deg, #1b1410, #6f4318);
}
.theme-velvet-rose {
  background: linear-gradient(145deg, #1b1023, #713b68);
}
.theme-midnight-noir {
  background: linear-gradient(145deg, #05070b, #111827);
}
.theme-boring-good {
  background: linear-gradient(145deg, #09090b, #27272a);
}
.mail-thread-list .unread-mail {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 1px solid color-mix(in srgb, var(--primary) 48%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}
.mail-thread-list .unread-mail svg {
  width: 11px;
  height: 11px;
  stroke-width: 2.3;
}

/* WhatsApp behaves as a client, not a stack of cards: compact chrome, a
   conversation viewport, and a composer anchored directly above Habibi's
   footer. `:has` is supported by the WKWebView runtime we ship. */
#results-view:has(.whatsapp-client) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 16px 25px 0;
}
#results-view:has(.whatsapp-client),
#results-view:has(.habibi-chat) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 16px 25px 0;
}
#results-view:has(.whatsapp-client),
#results-view:has(.habibi-chat),
#results-view:has(.mail-thread-client) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 16px 25px 0;
}
#results-view:has(.whatsapp-client) .conversation-mode,
#results-view:has(.habibi-chat) .conversation-mode,
#results-view:has(.mail-thread-client) .conversation-mode {
  flex: 0 0 auto;
  margin: 0 0 10px;
}
.whatsapp-client {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}
.whatsapp-client .chat-title {
  padding: 0 0 10px;
  gap: 9px;
}
.whatsapp-client .chat-title .icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}
.whatsapp-client .chat-title b {
  font-size: 14px;
}
.whatsapp-client .chat-title small {
  margin-top: 2px;
}
.whatsapp-client .messages {
  padding: 0 8px 12px 0;
}
.whatsapp-client .chat-composer {
  margin: 0 -25px;
  padding: 11px 25px 12px;
}

/* Mail threads are conversations too: compact identity, scrollable timeline,
   and the reply surface anchored to the bottom of the launcher. */
.mail-thread-client {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}
.mail-thread-client .chat-title {
  padding: 0 0 10px;
  gap: 9px;
}
.mail-thread-client .chat-title .icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}
.mail-thread-client .chat-title b {
  max-width: 520px;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-thread-client .chat-title small {
  max-width: 520px;
  overflow: hidden;
  margin-top: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-thread-client .messages {
  padding: 0 8px 12px 0;
}
.mail-thread-client .chat-composer {
  margin: 0 -25px;
  padding: 11px 25px 12px;
}
.mail-thread-client .chat-composer textarea {
  min-height: 48px;
}
.mail-thread-client .mail-message {
  max-width: min(88%, 660px);
}
.habibi-chat {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}
.habibi-chat .chat-title {
  padding: 0 0 10px;
}
.habibi-chat .chat-title .icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}
.habibi-chat .chat-title b {
  font-size: 14px;
}
.habibi-chat .messages {
  padding: 0 8px 12px 0;
}
.habibi-chat .chat-composer {
  margin: 0 -25px;
  padding: 11px 25px 12px;
}
.shortcut-recorder {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid rgba(80, 145, 253, 0.18);
  border-radius: 10px;
  background: rgba(4, 18, 35, 0.34);
}
.shortcut-current {
  color: #9eb9d5;
  font-size: 10px;
}
.shortcut-listen {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 8px;
  border: 1px dashed rgba(80, 145, 253, 0.3);
  border-radius: 8px;
  background: rgba(80, 145, 253, 0.06);
  color: #e8f3ff;
  text-align: left;
}
.shortcut-listen:hover,
.shortcut-listen.listening {
  border-style: solid;
  border-color: var(--primary);
  background: rgba(80, 145, 253, 0.14);
}
.shortcut-listen > span {
  display: grid;
  place-items: center;
  grid-row: span 2;
  width: 29px;
  height: 29px;
  border-radius: 6px;
  background: rgba(80, 145, 253, 0.16);
  color: var(--primary);
}
.shortcut-listen svg {
  width: 15px;
}
.shortcut-listen b,
.shortcut-listen small {
  display: block;
}
.shortcut-listen b {
  font-size: 11px;
}
.shortcut-listen small {
  color: #9bb6d2;
  font-size: 9px;
}
.shortcut-candidate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 7px 8px;
  border: 1px solid rgba(80, 145, 253, 0.2);
  border-radius: 7px;
  background: rgba(3, 14, 29, 0.36);
}
.shortcut-candidate.available {
  border-color: rgba(80, 145, 253, 0.55);
}
.shortcut-candidate b,
.shortcut-candidate small {
  display: block;
}
.shortcut-candidate b {
  color: #e9f4ff;
  font-size: 11px;
}
.shortcut-candidate small {
  margin-top: 2px;
  color: #9eb8d4;
  font-size: 9px;
}
.shortcut-candidate.available small {
  color: #9ed0ff;
}
.shortcut-candidate .primary {
  flex: 0 0 auto;
  padding: 6px 9px;
  font-size: 10px;
}
.shortcut-candidate .primary:disabled {
  opacity: 0.45;
  cursor: default;
}
body[data-theme='midnight-noir'] {
  --bg: #05070b;
  --card: #090d15;
  --line: rgba(96, 165, 250, 0.18);
  --ink: #f3f7ff;
  --primary: #60a5fa;
  --surface: rgba(17, 24, 39, 0.88);
  --surface-raised: rgba(30, 41, 59, 0.95);
  background:
    radial-gradient(760px 520px at 30% -10%, rgba(37, 99, 235, 0.18), transparent 62%), #05070b;
}
body[data-theme='aurora-glass'] {
  --bg: #11152f;
  --line: rgba(196, 181, 253, 0.26);
  --ink: #f6f2ff;
  --primary: #c4b5fd;
  --surface: rgba(44, 43, 91, 0.5);
  --surface-raised: rgba(70, 59, 122, 0.68);
  background:
    radial-gradient(800px 500px at 10% 0%, rgba(45, 212, 191, 0.2), transparent 60%),
    radial-gradient(680px 500px at 100% 10%, rgba(192, 132, 252, 0.22), transparent 64%), #11152f;
}
body[data-theme='forest-moss'] {
  --bg: #07100c;
  --line: rgba(183, 215, 123, 0.2);
  --ink: #f0f7ea;
  --primary: #b7d77b;
  --surface: rgba(28, 58, 42, 0.77);
  --surface-raised: rgba(43, 80, 57, 0.92);
  background:
    radial-gradient(760px 560px at 10% -8%, rgba(105, 151, 91, 0.2), transparent 60%),
    linear-gradient(145deg, #0c1812, #07100c);
}
body[data-theme='solar-gold'] {
  --bg: #0f0a06;
  --line: rgba(246, 200, 95, 0.23);
  --ink: #fff5da;
  --primary: #f6c85f;
  --surface: rgba(77, 48, 22, 0.72);
  --surface-raised: rgba(108, 68, 27, 0.88);
  background:
    radial-gradient(800px 500px at 15% -6%, rgba(223, 146, 40, 0.22), transparent 62%),
    linear-gradient(145deg, #1b1410, #0f0a06);
}
body[data-theme='velvet-rose'] {
  --bg: #100810;
  --line: rgba(240, 167, 196, 0.22);
  --ink: #fff2f8;
  --primary: #f0a7c4;
  --surface: rgba(78, 37, 72, 0.74);
  --surface-raised: rgba(107, 54, 96, 0.9);
  background:
    radial-gradient(800px 530px at 15% -5%, rgba(217, 104, 163, 0.18), transparent 63%),
    linear-gradient(145deg, #1b1023, #100810);
}
body[data-theme='boring-good'] {
  --bg: #09090b;
  --line: rgba(244, 244, 245, 0.16);
  --ink: #fafafa;
  --primary: #fafafa;
  --primary-deep: #27272a;
  --surface: rgba(24, 24, 27, 0.9);
  --surface-raised: rgba(39, 39, 42, 0.96);
  background: linear-gradient(145deg, #09090b, #111113);
}
body[data-theme='midnight-noir'] .command-card,
body[data-theme='aurora-glass'] .command-card,
body[data-theme='forest-moss'] .command-card,
body[data-theme='solar-gold'] .command-card,
body[data-theme='velvet-rose'] .command-card,
body[data-theme='boring-good'] .command-card {
  border-color: var(--line);
  background: linear-gradient(145deg, var(--surface-raised), var(--bg));
}

.appearance-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.mode-toggle {
  display: flex;
  padding: 2px;
  border: 1px solid rgba(80, 145, 253, 0.2);
  border-radius: 7px;
  background: rgba(3, 14, 29, 0.36);
}
.mode-toggle button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #9fb9d5;
  font-size: 9px;
}
.mode-toggle button svg {
  width: 12px;
}
.mode-toggle button.selected {
  background: rgba(80, 145, 253, 0.2);
  color: #eef6ff;
}

/* Light is a proper mode, not inverted dark. Every palette below controls the
   canvas, surfaces, border contrast and accent independently. */
body[data-color-mode='light'] {
  --ink: #10243b;
  --muted: #58708a;
  --line: rgba(34, 85, 135, 0.18);
  --surface: rgba(255, 255, 255, 0.76);
  --surface-raised: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  background: #eaf3ff;
}
body[data-color-mode='light'] .command-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(239, 247, 255, 0.9));
  box-shadow:
    0 24px 70px rgba(28, 66, 108, 0.18),
    inset 0 1px rgba(255, 255, 255, 0.9);
}
body[data-color-mode='light'] .topbar,
body[data-color-mode='light'] .search-row,
body[data-color-mode='light'] footer {
  background: rgba(255, 255, 255, 0.25);
}
body[data-color-mode='light'] input,
body[data-color-mode='light'] textarea {
  color: #10243b;
}
body[data-color-mode='light'] input::placeholder,
body[data-color-mode='light'] textarea::placeholder {
  color: #7891ab;
  opacity: 1;
}
body[data-color-mode='light'] .brand,
body[data-color-mode='light'] .result-title,
body[data-color-mode='light'] .theme-card b,
body[data-color-mode='light'] .shortcut-listen,
body[data-color-mode='light'] .shortcut-candidate b {
  color: #10243b;
}
body[data-color-mode='light'] .status,
body[data-color-mode='light'] .result-meta,
body[data-color-mode='light'] .theme-card small,
body[data-color-mode='light'] .shortcut-listen small,
body[data-color-mode='light'] .shortcut-candidate small,
body[data-color-mode='light'] footer,
body[data-color-mode='light'] .local-dot,
body[data-color-mode='light'] .clear-day small,
body[data-color-mode='light'] .proactive-footnote small {
  color: #5a718a;
}
body[data-color-mode='light'] .clear-day b,
body[data-color-mode='light'] .proactive-footnote b,
body[data-color-mode='light'] .glance-time b,
body[data-color-mode='light'] .briefing-mail b {
  color: #10243b;
}
body[data-color-mode='light'] .briefing-heading,
body[data-color-mode='light'] .agenda-home-header,
body[data-color-mode='light'] .quick-samples > span {
  color: #527a9f;
}
body[data-color-mode='light'] kbd {
  border-color: rgba(33, 88, 141, 0.2);
  background: rgba(33, 88, 141, 0.07);
  color: #3b6388;
  box-shadow: none;
}
body[data-color-mode='light'] .quick-action,
body[data-color-mode='light'] .connection,
body[data-color-mode='light'] .skill,
body[data-color-mode='light'] .compose,
body[data-color-mode='light'] .provider-option,
body[data-color-mode='light'] .theme-card {
  background: var(--surface);
  border-color: var(--line);
}
body[data-color-mode='light'] .quick-action:hover,
body[data-color-mode='light'] .result:hover,
body[data-color-mode='light'] .provider-option:hover,
body[data-color-mode='light'] .provider-option.selected,
body[data-color-mode='light'] .theme-card:hover,
body[data-color-mode='light'] .theme-card.selected {
  background: var(--surface-raised);
  border-color: var(--primary);
}
body[data-color-mode='light'] .result.selected {
  background: color-mix(in srgb, var(--primary) 13%, white);
}
body[data-color-mode='light'] .chat-composer,
body[data-color-mode='light'] .mail-compose,
body[data-color-mode='light'] .event-draft,
body[data-color-mode='light'] .shortcut-recorder {
  background: rgba(255, 255, 255, 0.58);
}
body[data-color-mode='light'] .chat-composer textarea,
body[data-color-mode='light'] .provider-fields input,
body[data-color-mode='light'] .model-combobox > button {
  background: rgba(255, 255, 255, 0.78);
  color: #10243b;
}
body[data-color-mode='light'] .shortcut-listen,
body[data-color-mode='light'] .shortcut-candidate,
body[data-color-mode='light'] .mode-toggle {
  background: rgba(255, 255, 255, 0.58);
  border-color: var(--line);
}
body[data-color-mode='light'] .mode-toggle button {
  color: #58708a;
}
body[data-color-mode='light'] .mode-toggle button.selected {
  background: color-mix(in srgb, var(--primary) 18%, white);
  color: #10243b;
}
body[data-color-mode='light'] .quick-samples button {
  background: color-mix(in srgb, var(--primary) 9%, white);
  border-color: color-mix(in srgb, var(--primary) 32%, white);
  color: #244b72;
}
body[data-color-mode='light'] .incoming,
body[data-color-mode='light'] .habibi-chat .message.incoming {
  background: rgba(225, 239, 255, 0.9);
  color: #10243b;
}
body[data-color-mode='light'] .outgoing,
body[data-color-mode='light'] .habibi-chat .message.outgoing {
  background: var(--primary-deep);
}

body[data-theme='deep-ocean'][data-color-mode='light'] {
  --bg: #faf5ec;
  --card: #ffffff;
  --line: rgb(14 34 64 / 12%);
  --muted: #5c6778;
  --ink: #0e2240;
  --primary: #2c6bd4;
  --primary-deep: #1c5bc3;
  --surface: #f0ebe2;
  --surface-raised: #ffffff;
  background: #faf5ec;
}
body[data-theme='midnight-noir'][data-color-mode='light'] {
  --bg: #eef4fb;
  --primary: #2563eb;
  --primary-deep: #1d4ed8;
  background: linear-gradient(145deg, #f4f8ff, #e5edf8);
}
body[data-theme='aurora-glass'][data-color-mode='light'] {
  --bg: #f8f3ff;
  --primary: #7c5cdd;
  --primary-deep: #6745c5;
  background:
    radial-gradient(730px 510px at 10% 0%, rgba(94, 234, 212, 0.28), transparent 60%),
    radial-gradient(650px 500px at 100% 0%, rgba(216, 180, 254, 0.38), transparent 64%), #f8f3ff;
}
body[data-theme='forest-moss'][data-color-mode='light'] {
  --bg: #f2f8ed;
  --primary: #557f39;
  --primary-deep: #426a2b;
  background:
    radial-gradient(700px 530px at 10% -7%, rgba(170, 209, 128, 0.35), transparent 62%), #f2f8ed;
}
body[data-theme='solar-gold'][data-color-mode='light'] {
  --bg: #fff8e7;
  --primary: #b46c08;
  --primary-deep: #925506;
  background:
    radial-gradient(720px 500px at 8% -8%, rgba(255, 207, 101, 0.38), transparent 62%), #fff8e7;
}
body[data-theme='velvet-rose'][data-color-mode='light'] {
  --bg: #fff3f8;
  --primary: #a54473;
  --primary-deep: #87345e;
  background:
    radial-gradient(750px 510px at 10% -8%, rgba(249, 168, 212, 0.38), transparent 62%), #fff3f8;
}
body[data-theme='boring-good'][data-color-mode='light'] {
  --bg: #fafafa;
  --ink: #18181b;
  --line: rgba(24, 24, 27, 0.15);
  --primary: #18181b;
  --primary-deep: #27272a;
  --surface: rgba(255, 255, 255, 0.92);
  --surface-raised: #fff;
  background: linear-gradient(145deg, #fafafa, #f4f4f5);
}
body[data-theme='boring-good'][data-color-mode='light'] .primary {
  color: #fafafa;
}

/* Composer attachments belong to the active Habibi palette rather than the
   original fixed charcoal chip. This keeps pasted notes and images coherent
   across every theme and both light/dark modes. */
.chat-attachment {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface-raised) 78%, transparent);
  box-shadow: inset 0 1px color-mix(in srgb, var(--ink) 7%, transparent);
}
.chat-attachment i {
  background: color-mix(in srgb, var(--primary) 16%, var(--surface));
  color: var(--primary);
}
.chat-attachment b {
  color: var(--ink);
}
.chat-attachment button {
  color: var(--muted);
}
.chat-attachment button:hover,
.chat-attachment button:focus {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--ink);
}

/* The attachment row is a direct child of the composer, so it must not inherit
   the composer action-row padding/alignment. Give pasted chips a dedicated
   lane above the textarea instead. */
.chat-composer > .chat-attachments {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 0 0 8px;
}
.chat-composer > .chat-attachments:empty {
  display: none;
}
.chat-composer > .chat-attachments + textarea {
  display: block;
}
.chat-composer input[type='file'] {
  display: none !important;
}
.chat-attachment {
  min-height: 30px;
  padding: 3px 4px 3px 5px;
}
.chat-attachment button {
  flex: 0 0 20px;
  align-self: center;
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0 0 0 2px;
  padding: 0;
  line-height: 1;
}
.chat-attachment button svg {
  display: block;
}

/* A single, deliberate composer surface: draft first, quiet context at left,
   and compact message actions aligned on the same baseline at right. */
.chat-composer {
  display: grid;
  gap: 8px;
}
.chat-composer textarea {
  min-height: 52px;
  padding: 11px 12px;
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  box-shadow: inset 0 1px color-mix(in srgb, var(--ink) 5%, transparent);
  transition:
    border-color 0.14s,
    box-shadow 0.14s;
}
.chat-composer textarea:focus {
  border-color: var(--primary);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent),
    inset 0 1px color-mix(in srgb, var(--ink) 5%, transparent);
}
.chat-composer > .composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  padding: 0 1px;
}
.composer-footer > span:first-child {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-actions {
  flex: 0 0 auto;
  gap: 7px;
}
.composer-icon {
  width: 32px;
  height: 32px;
  border-color: color-mix(in srgb, var(--primary) 22%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 82%, transparent);
}
.chat-composer .primary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 11px;
  border-radius: 8px;
}
.brand {
  display: flex;
  align-items: center;
}
.brand-logo {
  width: 23px;
  height: 23px;
  margin-right: 7px;
  object-fit: contain;
}
.identity-logo {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: contain;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.app-icon {
  overflow: hidden;
  background: transparent;
}
.app-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.app-icon-fallback {
  display: none;
}
.app-icon.icon-unavailable {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
}
.app-icon.icon-unavailable .app-icon-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.app-icon.icon-unavailable .app-icon-fallback svg {
  width: 17px;
  height: 17px;
}
.result .icon {
  position: relative;
}
.habibi-mark {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--surface) 74%, var(--primary));
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.34);
}
.habibi-mark img {
  width: 12px;
  height: 12px;
  object-fit: contain;
}
.result-tag.habibi-tag {
  border-color: color-mix(in srgb, var(--primary) 42%, transparent);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.05em;
}
.home-section-hidden {
  display: none !important;
}
.home-focus-only > * {
  display: none !important;
}
.home-layout-settings .appearance-heading small {
  color: var(--muted);
  font-size: 10px;
}
.home-layout-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}
.home-layout-control {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  cursor: pointer;
}
.home-layout-control:hover {
  border-color: var(--primary);
}
.home-layout-control b,
.home-layout-control small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-layout-control b {
  color: var(--ink);
  font-size: 10px;
}
.home-layout-control small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}
.home-layout-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  color: var(--primary);
}
.home-layout-icon svg {
  width: 14px;
  height: 14px;
}
.home-layout-control input {
  appearance: none;
  flex: 0 0 auto;
  width: 27px;
  height: 16px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface-raised);
  cursor: pointer;
  transition: 0.14s;
}
.home-layout-control input::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  margin: 2px;
  border-radius: 50%;
  background: var(--muted);
  transition: 0.14s;
}
.home-layout-control input:checked {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 28%, var(--surface));
}
.home-layout-control input:checked::after {
  margin-left: 13px;
  background: var(--primary);
}
.home-layout-control input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.getting-started {
  display: grid;
  gap: 9px;
  margin: 15px 0 18px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 33%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}
.getting-started-loading {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  color: var(--muted);
  font-size: 10px;
}
.getting-started-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}
.getting-started-heading > span {
  display: grid;
  gap: 3px;
}
.getting-started-heading b {
  color: var(--ink);
  font-size: 13px;
}
.getting-started-heading small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}
.getting-started-dismiss {
  flex: 0 0 auto;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
}
.getting-started-dismiss:hover,
.getting-started-dismiss:focus-visible {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--ink);
  outline: 0;
}
.getting-started-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.getting-started-step {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) auto 12px;
  align-items: center;
  gap: 7px;
  min-height: 48px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 89%, transparent);
  color: var(--ink);
  text-align: left;
}
.getting-started-step:hover,
.getting-started-step:focus-visible {
  border-color: var(--primary);
  background: var(--surface-raised);
  outline: 0;
}
.getting-started-step.complete {
  opacity: 0.7;
}
.getting-started-icon {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  color: var(--primary);
}
.getting-started-step.complete .getting-started-icon {
  background: color-mix(in srgb, var(--lime) 18%, var(--surface));
  color: var(--lime);
}
.getting-started-icon svg,
.getting-started-step > i svg {
  width: 13px;
  height: 13px;
}
.getting-started-step b,
.getting-started-step small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.getting-started-step b {
  font-size: 10px;
}
.getting-started-step small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}
.getting-started-step em {
  color: var(--primary);
  font-size: 8px;
  font-style: normal;
  font-weight: 750;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.getting-started-step > i {
  color: var(--muted);
}
.settings-getting-started .home-layout-control {
  width: 100%;
  text-align: left;
}
.settings-getting-started .home-layout-control > i {
  color: var(--muted);
}
.settings-getting-started .home-layout-control:hover > i {
  color: var(--primary);
}
.system-action-confirm {
  max-width: 540px;
  padding: 2px 0;
}
.system-action-hero {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 13px 0 15px;
}
.system-action-icon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 15%, var(--surface));
  color: var(--primary);
}
.system-action-icon svg {
  width: 20px;
  height: 20px;
}
.system-action-hero .compose-label {
  display: block;
  margin-bottom: 5px;
}
.system-action-hero h2 {
  margin: 0;
  color: var(--ink);
  font-size: 19px;
  letter-spacing: -0.035em;
}
.system-action-hero p {
  max-width: 410px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.system-action-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 11px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}
.system-action-note svg {
  flex: 0 0 auto;
  width: 14px;
  color: var(--primary);
}
.confirmation-options {
  display: grid;
  gap: 6px;
}
.confirm-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 55px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  transition:
    background 0.12s ease,
    box-shadow 0.12s ease;
}
.confirm-option:hover {
  background: var(--surface-raised);
}
.confirm-option span {
  display: grid;
  gap: 3px;
}
.confirm-option b {
  font-size: 12px;
}
.confirm-option small {
  color: var(--muted);
  font-size: 10px;
}
.confirm-option.selected {
  border-color: transparent;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  box-shadow:
    inset 0 0 0 1px var(--primary),
    inset 3px 0 0 var(--primary);
  outline: 0;
}
.system-action-confirm.is-dangerous .system-action-icon {
  background: rgba(222, 100, 86, 0.17);
  color: #f1a095;
}
.system-action-confirm.is-dangerous .confirm-option.selected {
  background: rgba(194, 74, 62, 0.13);
  box-shadow:
    inset 0 0 0 1px rgba(241, 160, 149, 0.85),
    inset 3px 0 0 #ef9a8f;
}
.system-action-confirm.is-dangerous .system-action-note svg {
  color: #ef9a8f;
}
.confirmation-hint {
  display: block;
  margin: 10px 1px 0;
  color: var(--muted);
  font-size: 10px;
}

/* Imported agent capabilities share the launcher language while clearly
   separating external instructions from Habibi's built-in skills. */
.imported-skills {
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px solid var(--line);
}
.imported-skills-heading {
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
}
.imported-skills-heading small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}
.imported-skill-group {
  margin-top: 13px;
}
.imported-skill-group > .briefing-heading {
  display: block;
  margin: 0 0 6px;
}
.imported-skill-list {
  display: grid;
  gap: 5px;
}
.imported-skill {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 14px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 58px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}
.imported-skill:hover,
.imported-skill:focus {
  border-color: var(--primary);
  outline: 0;
}
.imported-skill .icon {
  width: 34px;
  height: 34px;
}
.imported-skill b,
.imported-skill small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.imported-skill b {
  font-size: 12px;
}
.imported-skill small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}
.imported-skill em {
  color: var(--primary);
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
  letter-spacing: 0.06em;
}
.imported-skill > i {
  color: var(--muted);
}
.imported-empty {
  margin-top: 4px;
}
.imported-skill-review {
  max-width: 560px;
}
.imported-skill-review > label {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}
.imported-skill-review select,
.imported-skill-review textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: 0;
  background: var(--field);
  color: var(--ink);
  font: 12px/1.45 inherit;
}
.imported-skill-review textarea:focus,
.imported-skill-review select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.imported-note {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.instruction-preview {
  margin-top: 12px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
}
.instruction-preview summary {
  cursor: pointer;
  color: var(--ink);
  font-size: 11px;
  font-weight: 650;
}
.instruction-preview pre,
.imported-skill-output pre {
  max-height: 180px;
  margin: 9px 0 0;
  overflow: auto;
  color: var(--muted);
  font:
    10px/1.45 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  white-space: pre-wrap;
}
.imported-skill-output {
  margin-top: 12px;
}
.imported-skill-output pre {
  margin-top: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
}
.message-attachment-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.message-attachment-tags span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 180px;
  padding: 3px 5px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 5px;
  color: inherit;
  font-size: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-attachment-tags svg {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
}
/* Keyboard selection must never change a row's geometry. Keep the real
   border transparent at every state and draw the selection entirely inside
   the existing box. This also prevents a hovered row from jumping beneath
   the pointer while arrow-key navigation changes the selected result. */
.result {
  border-color: transparent;
  transform: none;
  transition:
    background 0.12s ease,
    box-shadow 0.12s ease;
}
.result:hover {
  border-color: transparent;
  background: var(--surface-raised);
  transform: none;
}
.result.selected,
.result.selected:hover {
  border-color: transparent;
  background: color-mix(in srgb, var(--primary) 13%, var(--surface));
  box-shadow:
    inset 0 0 0 1px var(--primary),
    inset 3px 0 0 var(--primary);
}
.result.launching {
  cursor: progress;
  opacity: 0.78;
}
.result .result-tag.launching-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 64px;
  justify-content: center;
}
.result .launching-tag .mini-spinner {
  width: 11px;
  height: 11px;
  border-width: 2px;
}
.running-apps {
  display: grid;
  gap: 14px;
}
.running-apps-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.running-apps-title .icon {
  width: 35px;
  height: 35px;
  border-radius: 10px;
}
.running-apps-title > span:nth-child(2) {
  min-width: 0;
}
.running-apps-title b,
.running-apps-title small {
  display: block;
}
.running-apps-title b {
  font-size: 14px;
}
.running-apps-title small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}
.running-apps-title .history-button {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
}
.running-apps-title .history-button svg {
  width: 13px;
}
.running-app-list {
  display: grid;
  gap: 5px;
}
.running-app {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) auto 14px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 59px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.running-app:hover,
.running-app:focus-visible {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  outline: 0;
}
.running-app .icon {
  width: 35px;
  height: 35px;
  border-radius: 9px;
}
.running-app .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.running-app b,
.running-app small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.running-app b {
  font-size: 12px;
}
.running-app small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}
.running-app em {
  color: var(--primary);
  font-size: 8px;
  font-style: normal;
  font-weight: 750;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.running-app > i {
  color: var(--muted);
}
.system-action-confirm.is-dangerous .running-app {
  border-color: rgba(241, 160, 149, 0.35);
}
.kubernetes-client {
  display: grid;
  gap: 12px;
}
.kubernetes-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kubernetes-heading b {
  display: block;
  font-size: 15px;
  letter-spacing: -0.02em;
}
.kubernetes-heading small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}
.kubernetes-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
}
.kubernetes-mark svg {
  width: 17px;
}
.kubernetes-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.kubernetes-context {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}
.kubernetes-context select {
  min-width: 280px;
  max-width: min(470px, 72vw);
  padding: 7px 28px 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: 0;
  background: color-mix(in srgb, var(--field) 82%, var(--surface));
  color: var(--ink);
  font: 11px inherit;
}
.kubernetes-readonly {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  color: var(--primary);
  font-size: 10px;
  font-weight: 700;
}
.kubernetes-readonly svg {
  width: 13px;
}
.kubernetes-resource-rail {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 1px 1px 4px;
  scrollbar-width: none;
}
.kubernetes-resource-rail::-webkit-scrollbar {
  display: none;
}
.kubernetes-resource-rail button,
.kubernetes-resource header button {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  color: var(--ink);
  font-size: 10px;
  font-weight: 650;
}
.kubernetes-resource-rail button:hover,
.kubernetes-resource-rail button:focus-visible,
.kubernetes-resource header button:hover,
.kubernetes-resource header button:focus-visible {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  outline: 0;
}
.kubernetes-output {
  min-height: 205px;
  max-height: 455px;
  overflow: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--field) 70%, var(--surface));
  box-shadow: inset 0 1px color-mix(in srgb, var(--ink) 4%, transparent);
}
.kubernetes-output .local-files-empty {
  min-height: 160px;
  align-items: center;
}
.kubernetes-overview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, var(--field));
}
.kubernetes-overview-head b {
  display: block;
  font-size: 11px;
}
.kubernetes-overview-head small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}
.kubernetes-overview-head > span:last-child {
  color: var(--muted);
  font-size: 10px;
}
.kubernetes-resource {
  padding: 11px 12px;
}
.kubernetes-resource + .kubernetes-resource {
  border-top: 1px solid var(--line);
}
.kubernetes-resource header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.kubernetes-resource header b {
  display: block;
  font-size: 11px;
}
.kubernetes-resource header span small {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 9px;
}
.kubernetes-resource header button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
}
.kubernetes-resource header button svg {
  width: 12px;
}
.kubernetes-list {
  display: grid;
  gap: 2px;
}
.kubernetes-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(105px, 0.5fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.kubernetes-item:hover,
.kubernetes-item:focus-visible {
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  outline: 0;
}
.kubernetes-resource-name b,
.kubernetes-resource-meta em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-style: normal;
}
.kubernetes-resource-name small,
.kubernetes-resource-meta small {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kubernetes-resource-meta em {
  color: var(--primary);
}
.kubernetes-item i {
  max-width: 105px;
  overflow: hidden;
  padding: 3px 5px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--primary) 11%, transparent);
  color: var(--primary);
  font-size: 9px;
  font-style: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.kubernetes-empty {
  padding: 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--field) 82%, transparent);
  color: var(--muted);
  font-size: 10px;
}
.kubernetes-query-result {
  padding: 10px;
}
.kubernetes-query-result pre {
  margin: 10px 0 0;
  color: var(--ink);
  font:
    10px/1.45 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  white-space: pre;
}
.kubernetes-tool-trace {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}
.kubernetes-tool-trace span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--primary);
  font-size: 10px;
  font-weight: 700;
}
.kubernetes-tool-trace span svg {
  width: 12px;
}
.kubernetes-tool-trace code {
  color: var(--ink);
  font:
    10px ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.kubernetes-tool-trace small {
  color: var(--muted);
  font-size: 10px;
}
@media (max-width: 560px) {
  .kubernetes-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .kubernetes-context {
    width: 100%;
  }
  .kubernetes-context select {
    min-width: 0;
    flex: 1;
  }
  .kubernetes-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .kubernetes-item i {
    display: none;
  }
}
.calendar-connect {
  width: 100%;
  padding: 13px 10px 16px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.calendar-connect > svg {
  width: 15px;
  margin-left: auto;
  color: var(--muted);
}
.calendar-connect:hover,
.calendar-connect:focus-visible {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  outline: 0;
}
.calendar-connect:hover b,
.calendar-connect:focus-visible b {
  color: var(--primary);
}
.calendar-connect:disabled {
  cursor: wait;
  opacity: 0.72;
}
#results-view:has(.kubernetes-client) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 16px 25px 0;
}
#results-view:has(.kubernetes-client) > .conversation-mode {
  flex: 0 0 auto;
  margin: 0 0 10px;
}
.kubernetes-client {
  flex: 1 1 auto;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 9px;
}
.kubernetes-workspace-chrome {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  border-radius: 13px;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--primary) 10%, var(--surface-raised)),
    var(--surface)
  );
  box-shadow: inset 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}
.kubernetes-toolbar {
  padding: 0 1px;
}
.kubernetes-resource-rail {
  padding: 1px 1px 0;
}
.kubernetes-output {
  min-height: 0;
  max-height: none;
}
.kubernetes-overview-head {
  position: sticky;
  z-index: 2;
  top: 0;
  background: var(--bg);
  box-shadow: 0 1px 0 var(--line);
}
.kubernetes-resource:last-child {
  padding-bottom: 18px;
}
.kubernetes-item {
  min-height: 42px;
}
.kubernetes-item:hover {
  transform: none;
}
.kubernetes-subpage,
.kubernetes-log-page {
  padding: 12px;
}
.kubernetes-subpage > header,
.kubernetes-log-page > header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.kubernetes-subpage > header > span,
.kubernetes-log-page > header > span {
  min-width: 0;
  flex: 1;
}
.kubernetes-subpage > header b,
.kubernetes-subpage > header small,
.kubernetes-log-page > header b,
.kubernetes-log-page > header small,
.kubernetes-log-page > header em {
  display: block;
}
.kubernetes-subpage > header b,
.kubernetes-log-page > header b {
  font-size: 13px;
}
.kubernetes-subpage > header small,
.kubernetes-log-page > header small,
.kubernetes-log-page > header em {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
}
.kubernetes-detail-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}
.kubernetes-log-button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 36%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--primary);
  font-size: 10px;
  font-weight: 700;
}
.kubernetes-log-button:hover,
.kubernetes-log-button:focus-visible {
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
  outline: 0;
}
.kubernetes-log-button svg {
  width: 13px;
}
.kubernetes-log-output {
  display: block;
  min-height: 270px;
  max-height: 390px;
  margin: 0;
  overflow: auto;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 9px;
  background: #070d16;
  color: #c9d7e9;
  font:
    10px/1.55 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  white-space: pre-wrap;
}
.kubernetes-mark {
  position: relative;
}
.kubernetes-mark > svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.9;
}
.kubernetes-habibi-mark {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--bg);
  border-radius: 50%;
  background: var(--surface-raised);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
}
.kubernetes-habibi-mark img {
  width: 11px;
  height: 11px;
  object-fit: contain;
}
.kubernetes-context-picker {
  position: relative;
}
.kubernetes-context-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 280px;
  max-width: min(470px, 72vw);
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--field) 82%, var(--surface));
  color: var(--ink);
  font: 11px inherit;
  text-align: left;
}
.kubernetes-context-trigger > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kubernetes-context-trigger svg {
  width: 14px;
  color: var(--muted);
}
.kubernetes-context-trigger:hover:not(:disabled),
.kubernetes-context-trigger:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 65%, var(--line));
  background: color-mix(in srgb, var(--primary) 7%, var(--field));
  outline: 0;
}
.kubernetes-context-trigger:disabled {
  cursor: wait;
  opacity: 0.7;
}
.kubernetes-context-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  min-width: max(100%, 320px);
  max-width: min(520px, 78vw);
  max-height: 260px;
  overflow: auto;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, var(--primary));
  border-radius: 10px;
  background: var(--bg);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.45),
    inset 0 1px color-mix(in srgb, var(--ink) 7%, transparent);
}
.kubernetes-context-menu.hidden {
  display: none;
}
.kubernetes-context-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font: 10px inherit;
  text-align: left;
}
.kubernetes-context-option > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kubernetes-context-option svg {
  width: 13px;
  color: var(--primary);
}
.kubernetes-context-option:hover,
.kubernetes-context-option:focus-visible,
.kubernetes-context-option.selected {
  background: color-mix(in srgb, var(--primary) 13%, var(--bg));
  outline: 0;
}
.kubernetes-context-option.selected {
  color: var(--primary);
}
.kubernetes-detail {
  padding: 12px;
}
.kubernetes-detail-back {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 13px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}
.kubernetes-detail-back:hover,
.kubernetes-detail-back:focus-visible {
  color: var(--primary);
  outline: 0;
}
.kubernetes-detail-back svg {
  width: 13px;
}
.kubernetes-detail > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.kubernetes-detail > header small,
.kubernetes-detail > header b,
.kubernetes-detail > header em {
  display: block;
}
.kubernetes-detail > header small {
  color: var(--primary);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}
.kubernetes-detail > header b {
  margin-top: 3px;
  overflow-wrap: anywhere;
  font-size: 15px;
  letter-spacing: -0.02em;
}
.kubernetes-detail > header em {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}
.kubernetes-detail > header > i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--primary) 11%, var(--surface));
  color: var(--primary);
}
.kubernetes-detail > header > i svg {
  width: 16px;
}
.kubernetes-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 12px 0;
}
.kubernetes-facts > div {
  min-width: 0;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 50%, transparent);
}
.kubernetes-facts small,
.kubernetes-facts b {
  display: block;
}
.kubernetes-facts small {
  color: var(--muted);
  font-size: 9px;
}
.kubernetes-facts b {
  margin-top: 4px;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kubernetes-detail-section {
  margin-top: 12px;
}
.kubernetes-detail-section h3 {
  margin: 0 0 6px;
  font-size: 10px;
  letter-spacing: 0.03em;
}
.kubernetes-container,
.kubernetes-condition {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px;
  border-top: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
}
.kubernetes-container b,
.kubernetes-container small,
.kubernetes-condition b,
.kubernetes-condition small {
  display: block;
}
.kubernetes-container b,
.kubernetes-condition b {
  font-size: 10px;
}
.kubernetes-container small,
.kubernetes-condition small {
  max-width: 360px;
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kubernetes-container > span:last-child {
  text-align: right;
}
.kubernetes-container em,
.kubernetes-condition em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}
.kubernetes-container em.ready,
.kubernetes-condition em.ready {
  color: var(--primary);
}
.kubernetes-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.kubernetes-labels span {
  max-width: 100%;
  padding: 4px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  color: var(--muted);
  font-size: 9px;
}
.kubernetes-labels b {
  margin-right: 4px;
  color: var(--ink);
  font-weight: 650;
}
@media (max-width: 560px) {
  .kubernetes-facts {
    grid-template-columns: 1fr;
  }
  .kubernetes-container small,
  .kubernetes-condition small {
    max-width: 180px;
  }
}
.result:focus,
.result:focus-visible {
  outline: 0;
}
.result .icon.kubernetes {
  position: relative;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 13%, var(--surface));
}
.kubernetes-result-wheel {
  display: grid;
  place-items: center;
}
.kubernetes-result-wheel svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.9;
}
.result .icon.agents:has(.habibi-chat-mark) {
  background: transparent;
}
.habibi-chat-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.habibi-chat-mark img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.habibi-chat-mark i {
  position: absolute;
  right: -3px;
  top: -3px;
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border: 1px solid var(--surface);
  border-radius: 50%;
  background: var(--primary);
  color: var(--bg);
}
.habibi-chat-mark i svg {
  width: 8px;
  height: 8px;
  stroke-width: 2.5;
}
.chat-title-mark {
  width: 35px;
  height: 35px;
  flex: 0 0 auto;
  background: transparent;
}
.chat-title-mark img {
  width: 31px;
  height: 31px;
}
.result.selected,
.result.selected:hover {
  border-color: transparent;
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
  box-shadow: none;
}
.result:hover {
  background: color-mix(in srgb, var(--primary) 3%, var(--surface));
}
.kubernetes-scopes {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.kubernetes-context-trigger {
  min-width: 210px;
  max-width: min(360px, 38vw);
}
@media (max-width: 760px) {
  .kubernetes-toolbar,
  .kubernetes-scopes {
    align-items: stretch;
    flex-direction: column;
  }
  .kubernetes-context {
    justify-content: space-between;
  }
  .kubernetes-context-picker {
    min-width: 0;
    flex: 1;
  }
  .kubernetes-context-trigger {
    min-width: 0;
    max-width: none;
    width: 100%;
  }
}
.agent-sessions-plugin,
.agent-transcript {
  min-height: 0;
}
.agent-sessions-heading,
.agent-transcript > header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}
.agent-sessions-heading b,
.agent-sessions-heading small,
.agent-transcript > header b,
.agent-transcript > header small {
  display: block;
}
.agent-sessions-heading b,
.agent-transcript > header b {
  font-size: 13px;
}
.agent-sessions-heading small,
.agent-transcript > header small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}
.agent-transcript > header > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}
.agent-transcript > header small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-session-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.agent-session-tabs button {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--muted);
  font-size: 10px;
}
.agent-session-tabs button.selected,
.agent-session-tabs button:hover,
.agent-session-tabs button:focus-visible {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--ink);
  outline: 0;
}
.agent-transcript {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.agent-transcript-scroll {
  display: grid;
  gap: 8px;
  min-height: 0;
  max-height: 500px;
  overflow: auto;
  padding: 1px 1px 12px;
}
.agent-transcript-entry {
  max-width: 86%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--field) 72%, var(--surface));
}
.agent-transcript-entry.user {
  justify-self: end;
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
  background: color-mix(in srgb, var(--primary) 13%, var(--surface));
}
.agent-transcript-entry.tool {
  max-width: 100%;
  border-style: dashed;
  background: transparent;
}
.agent-transcript-entry small {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 9px;
}
.agent-transcript-entry pre {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  color: var(--ink);
  font:
    10px/1.45 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.agent-sessions-plugin {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.agent-sessions-plugin .agent-sessions-heading {
  flex: 0 0 auto;
  margin-bottom: 9px;
  padding: 10px 11px;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--primary) 10%, var(--surface-raised)),
    var(--surface)
  );
}
.agent-sessions-plugin .agent-session-tabs {
  flex: 0 0 auto;
  margin: 0 0 8px;
  padding: 0 1px;
}
.agent-sessions-plugin .agent-dock {
  display: grid;
  gap: 2px;
  min-height: 0;
  max-height: 510px;
  overflow: auto;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--field) 70%, var(--surface));
}
.agent-sessions-plugin .agent-session {
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
}
.agent-sessions-plugin .agent-session.selected,
.agent-sessions-plugin .agent-session:hover,
.agent-sessions-plugin .agent-session:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 52%, var(--line));
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  outline: 0;
}
.agent-sessions-plugin .agent-session .icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 14px;
}
.agent-sessions-plugin .agent-session b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.agent-sessions-plugin .agent-session small {
  margin-top: 2px;
  font-size: 9px;
}
.agent-sessions-plugin .agent-session code {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}
.agent-sessions-plugin .agent-session > svg {
  margin: 0;
  color: var(--muted);
}
.kubernetes-loading {
  display: grid;
  gap: 18px;
  min-height: 220px;
  padding: 18px;
}
.kubernetes-loading-title {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
}
.kubernetes-loading-title b,
.kubernetes-loading-title small {
  display: block;
}
.kubernetes-loading-title b {
  font-size: 11px;
}
.kubernetes-loading-title small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}
.kubernetes-loading-skeleton {
  display: grid;
  gap: 7px;
}
.kubernetes-loading-skeleton i {
  display: block;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  border-radius: 8px;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--field) 86%, var(--surface)) 22%,
    color-mix(in srgb, var(--primary) 10%, var(--surface)) 48%,
    color-mix(in srgb, var(--field) 86%, var(--surface)) 72%
  );
  background-size: 220% 100%;
  animation: kubernetes-shimmer 1.3s ease-in-out infinite;
}
.kubernetes-loading-skeleton i:nth-child(2) {
  width: 91%;
}
.kubernetes-loading-skeleton i:nth-child(3) {
  width: 82%;
}
.kubernetes-loading-skeleton i:nth-child(4) {
  width: 94%;
}
.kubernetes-loading-skeleton i:nth-child(5) {
  width: 72%;
}
@keyframes kubernetes-shimmer {
  to {
    background-position: -220% 0;
  }
}
.kubernetes-log-filter-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--field) 72%, var(--surface));
}
.kubernetes-log-filter-row > svg {
  width: 13px;
  color: var(--muted);
}
.kubernetes-log-filter-row input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 10px inherit;
}
.kubernetes-log-filter-row input::placeholder {
  color: var(--muted);
}
.kubernetes-log-filter-row small {
  color: var(--muted);
  font-size: 9px;
  white-space: nowrap;
}
.kubernetes-diagnosis {
  display: grid;
  gap: 11px;
  padding: 13px;
}
.kubernetes-diagnosis > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}
.kubernetes-diagnosis > header span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
}
.kubernetes-diagnosis > header span svg {
  width: 14px;
}
.kubernetes-diagnosis > header small {
  overflow: hidden;
  color: var(--muted);
  font:
    9px ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kubernetes-diagnosis > article {
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  font-size: 11px;
  line-height: 1.5;
}
.kubernetes-diagnosis > article p {
  margin: 0 0 7px;
}
.kubernetes-diagnosis > article p:last-child {
  margin-bottom: 0;
}
.kubernetes-diagnosis .kubernetes-tool-trace {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
}
.kubernetes-diagnosis .kubernetes-tool-trace > div {
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}
.kubernetes-diagnosis .kubernetes-tool-trace b,
.kubernetes-diagnosis .kubernetes-tool-trace small {
  display: block;
}
.kubernetes-diagnosis .kubernetes-tool-trace b {
  color: var(--primary);
  font-size: 9px;
}
.kubernetes-diagnosis .kubernetes-tool-trace small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}
.kubernetes-diagnosis details {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.kubernetes-diagnosis summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 10px;
}
.kubernetes-diagnosis details pre {
  max-height: 210px;
  overflow: auto;
  margin: 8px 0 0;
  color: var(--ink);
  font:
    9px/1.5 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  white-space: pre-wrap;
}

/* A visual file retains its preview even in a mixed result list. */
.agent-file-thumbnail {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  object-fit: cover;
  background: var(--surface);
}
.result .icon.file-preview {
  position: relative;
  overflow: hidden;
  background: var(--surface-raised);
  color: var(--muted);
}
.result .icon.file-preview .file-thumbnail {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.result .icon.file-preview > svg {
  position: absolute;
  inset: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.result .icon.file-preview.icon-unavailable > svg {
  opacity: 1;
}

/* Provider setup shares the same compact control language as the Kubernetes
   plugin. The model picker is a normal field with a quiet affordance instead
   of a second, high-contrast control bolted onto its edge. */
.provider-detail {
  padding: 12px;
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 88%, var(--field));
}
.provider-detail-title {
  margin-bottom: 11px;
}
.provider-detail-title b {
  color: var(--ink);
}
.provider-detail-title span,
.provider-fields label,
.provider-actions {
  color: var(--muted);
}
.provider-fields {
  gap: 9px;
}
.provider-fields label {
  gap: 5px;
}
.provider-field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.provider-detail .active-model-label {
  display: inline-flex;
  align-items: center;
  padding: 2px 5px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  color: var(--primary);
  font-size: 8px;
  font-style: normal;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.model-combobox {
  grid-template-columns: minmax(0, 1fr) 34px;
  min-width: 0;
}
.model-combobox input,
.provider-fields input {
  min-height: 38px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 560;
}
.model-combobox input {
  min-width: 0;
  border-radius: 8px 0 0 8px;
}
.provider-fields input.active-model-input {
  border-color: color-mix(in srgb, var(--primary) 68%, var(--line));
  box-shadow: inset 2px 0 var(--primary);
}
.model-combobox > button {
  min-width: 34px;
  padding: 0;
  border-color: rgba(80, 145, 253, 0.25);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: rgba(3, 13, 27, 0.72);
  color: var(--muted);
}
.model-combobox > button:hover,
.model-combobox > button:focus-visible {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 9%, rgba(3, 13, 27, 0.72));
  color: var(--ink);
  outline: 0;
}
.model-combobox > button svg {
  width: 13px;
  height: 13px;
}
.model-menu {
  z-index: 30;
  top: calc(100% + 6px);
  max-height: 220px;
  padding: 4px;
  border-color: color-mix(in srgb, var(--line) 88%, var(--primary));
  border-radius: 10px;
  background: var(--bg);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.45),
    inset 0 1px color-mix(in srgb, var(--ink) 7%, transparent);
}
.model-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 33px;
  padding: 7px 8px;
  border-radius: 7px;
  color: var(--ink);
  font:
    10px 'JetBrains Mono',
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.model-menu button:hover,
.model-menu button:focus-visible,
.model-menu button.active-model-option {
  background: color-mix(in srgb, var(--primary) 13%, var(--bg));
  color: var(--ink);
  outline: 0;
}
.model-menu button.active-model-option em {
  color: var(--primary);
  font: 750 8px inherit;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.model-empty {
  color: var(--muted);
}

/* A primary action is always legible as one coherent blue button: white label,
   white keyboard hint, and inherited icon colour in every theme. */
.primary,
.agent-proposal button {
  color: #fff;
}
.primary kbd,
.chat-composer .primary kbd,
.mail-actions .primary kbd {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
}
.primary svg {
  color: currentColor;
}
body[data-color-mode='light'] .model-combobox > button {
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted);
}
body[data-color-mode='light'] .model-menu {
  background: var(--bg);
}

.model-chevron-icon {
  display: block;
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

/* Connected services are a first-class part of Preferences, rather than a
   collection of setup screens hidden behind search results. */
.integrations-settings {
  margin-top: 18px;
}
.integration-settings-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.integration-setting {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 13px;
  align-items: center;
  gap: 8px;
  min-height: 55px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  color: var(--ink);
  text-align: left;
}
.integration-setting:hover,
.integration-setting:focus-visible {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  outline: 0;
}
.integration-setting .home-layout-icon {
  margin: 0;
}
.integration-setting .home-layout-icon.whatsapp {
  background: #214227;
  color: #8ded72;
}
.integration-setting .home-layout-icon.gmail {
  background: #4e2927;
  color: #ffad9c;
}
.integration-setting .home-layout-icon.calendar {
  background: #4a2825;
  color: #f5b0a2;
}
.integration-setting b,
.integration-setting small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.integration-setting b {
  font-size: 10px;
}
.integration-setting small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}
.integration-setting > i {
  color: var(--muted);
}
.integration-setting > i svg {
  width: 13px;
  height: 13px;
}
@media (max-width: 560px) {
  .integration-settings-list {
    grid-template-columns: 1fr;
  }
}

/* AppKit owns the pixels outside the rounded launcher surface. Theme canvas
   backgrounds are useful in the browser, but must never paint the transparent
   WKWebView corners or they appear as a dark rectangular halo around Habibi. */
html.native-host,
body.native-host {
  background: transparent;
}

/* Palette rules above also serve the full-page browser UI. Their translucent
   surfaces blend rounded pixels against transparent black in WKWebView and
   leave a dark fringe at the AppKit window edge. Clidey Ink already has its
   dedicated native treatment; compose every other palette onto its opaque
   base colour before drawing the rounded frame. */
body.native-host:not([data-theme='deep-ocean']) .command-card {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--bg));
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--surface-raised) 72%, var(--bg)),
    var(--bg)
  );
  box-shadow: inset 0 1px color-mix(in srgb, var(--ink) 10%, transparent);
}