/* Studio chat owns only this root; no canvas, editor geometry or native controls. */
.studio-chat-root {
  --chat-panel: var(--studio-panel, var(--color-background-primary, #fff));
  --chat-page: var(--studio-page, var(--color-background-tertiary, #f6f6f7));
  --chat-hover: var(--studio-hover, var(--color-background-secondary, #f0f0f2));
  --chat-border: var(--studio-border, #e4e4e7);
  --chat-text: var(--color-foreground-primary, #202024);
  --chat-muted: var(--studio-muted, var(--color-foreground-secondary, #64646f));
  --chat-focus: var(--studio-focus, #1678e8);
  --chat-accent: #0969cf;
  --chat-accent-hover: #075bb5;
  --chat-selection: var(--studio-selection, #e5f0ff);
  --chat-selected-text: var(--studio-selected-text, #095cb5);
  --chat-error: #ba3030;
  --chat-success: #1b7e4f;
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-index-panels, 10) + 2);
  pointer-events: none;
  color: var(--chat-text);
  font-family: var(--studio-ui-font, "Inter", "Segoe UI", Arial, sans-serif);
  font-size: 12px;
  line-height: 1.5;
  text-align: start;
  letter-spacing: -0.01em;
}

.default .studio-chat-root {
  --chat-error: #ff9e9e;
  --chat-success: #83d4aa;
}

.studio-chat-root *,
.studio-chat-root *::before,
.studio-chat-root *::after { box-sizing: border-box; }

.studio-chat-root [hidden] { display: none !important; }

.studio-chat-root :is(button, input, textarea, select) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

.studio-chat-root button { cursor: pointer; }
.studio-chat-root button:disabled { cursor: not-allowed; opacity: 0.5; }
.studio-chat-root :is(button, textarea, select):focus-visible {
  outline: 2px solid var(--chat-focus);
  outline-offset: 2px;
}

.studio-chat-root svg { width: 18px; height: 18px; flex: 0 0 auto; }

.studio-chat-toggle {
  position: absolute;
  inset-inline-end: 18px;
  inset-block-end: 72px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  pointer-events: auto;
  border: 1px solid var(--chat-border);
  border-radius: 9px;
  color: var(--chat-text);
  background: var(--chat-panel);
  box-shadow: var(--studio-raised-shadow, 0 4px 16px #172b4d1a);
  font-weight: 500;
}

.studio-chat-toggle:hover { background: var(--chat-hover); }
.studio-chat-toggle > svg { color: var(--chat-selected-text); }
.studio-chat-working::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--chat-accent);
}

.studio-chat-drawer {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  width: 380px;
  max-width: 100%;
  min-height: 0;
  pointer-events: auto;
  color: var(--chat-text);
  background: var(--chat-panel);
  border-inline-start: 1px solid var(--chat-border);
  box-shadow: -8px 0 32px #0000000d;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Hide every cached private surface until the current session is reverified. */
.studio-chat-root[data-private="hidden"] :is(.studio-chat-context, .studio-chat-connection, .studio-chat-settings, .studio-chat-history, .studio-chat-transcript, .studio-chat-footer) { display: none !important; }
.studio-chat-root[data-view="settings"] :is(.studio-chat-context, .studio-chat-connection, .studio-chat-history, .studio-chat-transcript, .studio-chat-footer) { display: none !important; }
.studio-chat-privacy-guard { display: flex; flex: 1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; padding: 24px; }
.studio-chat-privacy-guard > svg { width: 24px; height: 24px; color: var(--chat-selected-text); }
.studio-chat-privacy-guard p { margin: 0; color: var(--chat-muted); font-size: 12px; line-height: 1.65; }
.studio-chat-privacy-guard .studio-chat-button { width: auto; }

.studio-chat-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
  padding: 8px 10px 8px 16px;
  border-bottom: 1px solid var(--chat-border);
}

.studio-chat-brand, .studio-chat-header-actions { display: flex; align-items: center; gap: 4px; }
.studio-chat-brand { gap: 8px; }
.studio-chat-brand > svg { color: var(--chat-selected-text); }
.studio-chat-brand h2 { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.3; }

.studio-chat-icon-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  padding: 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--chat-muted);
}

.studio-chat-icon-button:hover { color: var(--chat-text); background: var(--chat-hover); }
.studio-chat-icon-button[aria-expanded="true"] { background: var(--chat-selection); color: var(--chat-selected-text); }

.studio-chat-context { flex-shrink: 0; padding: 12px 16px 10px; border-bottom: 1px solid var(--chat-border); }
.studio-chat-context-file { display: flex; align-items: center; gap: 7px; min-width: 0; font-weight: 500; }
.studio-chat-context-file > svg { width: 15px; height: 15px; color: var(--chat-muted); }
.studio-chat-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-chat-context-state {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: var(--chat-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studio-chat-context-state[data-ready="true"]::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 5px 1px 1px;
  border-radius: 50%;
  background: var(--chat-success);
}

.studio-chat-connection {
  flex-shrink: 0;
  margin: 12px 12px 0;
  padding: 11px 12px;
  background: var(--chat-page);
  border: 1px solid var(--chat-border);
  border-radius: 8px;
}
.studio-chat-connection-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.studio-chat-connection h3 { margin: 0; font-size: 12px; font-weight: 600; line-height: 1.4; }
.studio-chat-connection-reason {
  margin: 6px 0 10px;
  color: var(--chat-muted);
  font-size: 11px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.studio-chat-connection[data-state="connected"] { padding-block: 9px; }
.studio-chat-connection[data-state="connected"] .studio-chat-connection-reason { margin-block: 3px 4px; }
.studio-chat-connection[data-state="connected"] h3::before { content: "●"; margin-right: 5px; color: var(--chat-success); font-size: 9px; }
.studio-chat-connection[data-state="connected"] .studio-chat-connect { min-height: 28px; margin-top: 8px; border-color: var(--chat-border); color: var(--chat-text) !important; background: transparent; }
.studio-chat-connection[data-state="connected"] .studio-chat-connect:hover { background: var(--chat-hover); }
.studio-chat-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--chat-accent);
  color: #fff !important;
  font-weight: 500;
}
.studio-chat-button:hover:not(:disabled) { background: var(--chat-accent-hover); }
.studio-chat-button:disabled { background: var(--chat-hover); color: var(--chat-muted) !important; border-color: var(--chat-border); opacity: 1; }
.studio-chat-text-button { padding: 0; border: 0; border-radius: 2px; background: transparent; color: var(--chat-muted); font-size: 11px !important; white-space: nowrap; }
.studio-chat-text-button:hover { color: var(--chat-selected-text); text-decoration: underline; text-underline-offset: 2px; }

/* The connector is installed once per person. Setup stays in this drawer;
 * model auth remains in the app's own local browser, never in this document. */
.studio-chat-settings { flex: 1 1 0; min-height: 0; padding: 18px 16px 22px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.studio-chat-settings-top > .studio-chat-text-button { margin-bottom: 14px; }
.studio-chat-settings h3 { margin: 0 0 7px; font-size: 17px; font-weight: 600; line-height: 1.45; letter-spacing: -0.025em; }
.studio-chat-settings h3:focus { outline: none; }
.studio-chat-settings-top > p { margin: 0; color: var(--chat-muted); font-size: 12px; line-height: 1.65; }
.studio-chat-device-card { margin-top: 18px; padding: 11px 12px; border: 1px solid var(--chat-border); border-radius: 8px; background: var(--chat-page); }
.studio-chat-device-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.studio-chat-device-title { display: flex; align-items: center; gap: 7px; min-width: 0; }
.studio-chat-device-title > svg { width: 16px; height: 16px; color: var(--chat-muted); }
.studio-chat-device-name { min-width: 0; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.studio-chat-device-state { flex-shrink: 0; padding: 2px 6px; border: 1px solid var(--chat-border); border-radius: 4px; font-size: 10px; color: var(--chat-muted); white-space: nowrap; }
.studio-chat-device-state[data-online="true"] { color: var(--chat-success); }
.studio-chat-device-state[data-online="true"]::before { content: "●"; margin-right: 4px; font-size: 8px; }
.studio-chat-device-reason { margin: 7px 0 0; color: var(--chat-muted); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.studio-chat-setup-step { padding-block: 19px; border-bottom: 1px solid var(--chat-border); }
.studio-chat-setup-step h4 { margin: 0 0 7px; font-size: 12px; font-weight: 600; }
.studio-chat-setup-step > p { margin: 0 0 11px; color: var(--chat-muted); font-size: 11px; line-height: 1.65; }
.studio-chat-setup-step > .studio-chat-download-meta { margin: 7px 1px 0; font-size: 10px; }
.studio-chat-outline-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 32px; padding: 6px 10px; border: 1px solid var(--chat-border); border-radius: 6px; background: transparent; color: var(--chat-text); font-weight: 500; }
.studio-chat-outline-button:hover:not(:disabled) { background: var(--chat-hover); }
.studio-chat-code-box { margin-bottom: 10px; padding: 10px 12px 8px; border: 1px solid var(--chat-border); border-radius: 7px; background: var(--chat-page); }
.studio-chat-code-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.studio-chat-pair-code { min-width: 0; color: var(--chat-text); font-family: "Cascadia Mono", Consolas, monospace; font-size: 19px; font-weight: 500; line-height: 1.5; letter-spacing: 0.1em; white-space: nowrap; user-select: all; }
.studio-chat-pair-code:focus-visible { outline: 2px solid var(--chat-focus); outline-offset: 3px; border-radius: 2px; }
.studio-chat-pair-ttl { display: block; margin-top: 4px; color: var(--chat-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.studio-chat-setup-step > .studio-chat-account-state { padding: 8px 10px; border-radius: 6px; background: var(--chat-page); color: var(--chat-text); overflow-wrap: anywhere; }
.studio-chat-settings-error { margin: 14px 0 0; color: var(--chat-error); font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.studio-chat-settings-notice { margin: 12px 0 0; color: var(--chat-muted); font-size: 11px; line-height: 1.6; }
.studio-chat-settings-notice:empty { display: none; }
.studio-chat-settings-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; }
.studio-chat-unlink { color: var(--chat-error); }

.studio-chat-history {
  flex: 0 1 auto;
  min-height: 80px;
  max-height: 30%;
  padding: 10px 8px;
  margin-top: 10px;
  background: var(--chat-page);
  border-block: 1px solid var(--chat-border);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.studio-chat-history-heading { padding: 0 8px 6px; color: var(--chat-muted); font-size: 11px; font-weight: 500; }
.studio-chat-history-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 6px; background: transparent; text-align: start; }
.studio-chat-history-item:hover { background: var(--chat-hover); }
.studio-chat-history-item[aria-current="true"] { background: var(--chat-selection); color: var(--chat-selected-text); }
.studio-chat-history-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-chat-history-date { flex-shrink: 0; font-size: 10px; color: var(--chat-muted); }
.studio-chat-history-empty { margin: 4px 8px; color: var(--chat-muted); font-size: 11px; }

.studio-chat-transcript { display: flex; flex-direction: column; flex: 1 1 0; min-height: 80px; overflow: hidden; }
.studio-chat-current-title { flex-shrink: 0; min-height: 29px; margin: 0; padding: 12px 16px 3px; overflow: hidden; color: var(--chat-muted); font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.studio-chat-empty { display: flex; flex: 1; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 100px; padding: 24px; overflow-y: auto; }
.studio-chat-empty-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: 12px; border: 1px solid var(--chat-border); border-radius: 10px; background: var(--chat-page); color: var(--chat-selected-text); }
.studio-chat-empty-icon svg { width: 22px; height: 22px; }
.studio-chat-empty h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.4; font-weight: 600; letter-spacing: -0.025em; }
.studio-chat-empty p { max-width: 280px; margin: 0; color: var(--chat-muted); line-height: 1.65; }
.studio-chat-messages { flex: 1; min-height: 0; padding: 6px 16px 20px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.studio-chat-messages:focus-visible { outline: 2px solid var(--chat-focus); outline-offset: -3px; }
.studio-chat-message { margin: 15px 0 0; }
.studio-chat-message:first-child { margin-top: 10px; }
.studio-chat-message-role { margin-bottom: 5px; font-size: 11px; font-weight: 600; color: var(--chat-muted); }
.studio-chat-message-text { font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; user-select: text; }
.studio-chat-message-user .studio-chat-message-text { padding: 10px 12px; border-radius: 9px; background: var(--chat-page); border: 1px solid var(--chat-border); }
.studio-chat-message-pending .studio-chat-message-text::after { content: "Готовлю ответ…"; color: var(--chat-muted); font-size: 12px; }
.studio-chat-partial-note { margin: 8px 0 0; color: var(--chat-muted); font-size: 11px; line-height: 1.5; }

.studio-chat-footer { flex-shrink: 0; padding: 10px 12px 12px; border-top: 1px solid var(--chat-border); background: var(--chat-panel); }
.studio-chat-activity { margin: 0 2px 8px; color: var(--chat-muted); font-size: 11px; }
.studio-chat-activity::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: var(--chat-accent); }
.studio-chat-error { max-height: 88px; margin: 0 2px 9px; overflow-y: auto; color: var(--chat-error); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.studio-chat-composer { margin: 0; padding: 8px; border: 1px solid var(--chat-border); border-radius: 10px; background: var(--chat-page); }
.studio-chat-composer:focus-within { border-color: var(--chat-focus); box-shadow: 0 0 0 1px var(--chat-focus); }
.studio-chat-input { display: block; width: 100%; min-height: 72px; max-height: 164px; margin: 0; padding: 4px; resize: none; border: 0; border-radius: 3px; outline: none !important; background: transparent; font-size: 13px !important; line-height: 1.6 !important; box-shadow: none; user-select: text; }
.studio-chat-input::placeholder { color: var(--chat-muted); opacity: 1; }
.studio-chat-input:disabled { cursor: not-allowed; opacity: 0.75; }
.studio-chat-composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.studio-chat-model-label { flex: 1; min-width: 0; }
.studio-chat-model { display: block; width: 100%; max-width: 260px; min-height: 30px; padding: 4px 20px 4px 5px; overflow: hidden; border: 0; border-radius: 5px; background-color: transparent; color: var(--chat-muted) !important; font-size: 11px !important; text-overflow: ellipsis; cursor: pointer; }
.studio-chat-model:hover:not(:disabled) { background-color: var(--chat-hover); color: var(--chat-text) !important; }
.studio-chat-model option { background: var(--chat-panel); color: var(--chat-text); }
.studio-chat-model:disabled { cursor: not-allowed; opacity: 0.7; }
.studio-chat-send { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 5px; border: 0; border-radius: 7px; background: var(--chat-accent); color: #fff !important; }
.studio-chat-send:hover:not(:disabled) { background: var(--chat-accent-hover); }
.studio-chat-send:disabled { background: var(--chat-hover); color: var(--chat-muted) !important; opacity: 0.6; }
.studio-chat-stop { background: var(--chat-text); color: var(--chat-panel) !important; }
.studio-chat-stop:hover:not(:disabled) { background: var(--chat-muted); }
.studio-chat-stop svg { width: 15px; height: 15px; fill: currentColor; stroke-width: 0; }
.studio-chat-hint { margin: 8px 3px 0; color: var(--chat-muted); font-size: 10px; line-height: 1.4; text-align: center; }
.studio-chat-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0; }

@media (max-width: 600px) {
  .studio-chat-drawer { width: min(380px, 100%); }
  .studio-chat-toggle { inset-inline-end: 12px; }
}

@media (max-height: 650px) {
  .studio-chat-context { padding-block: 7px; }
  .studio-chat-connection { margin-top: 8px; padding-block: 8px; }
  .studio-chat-connection-reason { max-height: 72px; overflow-y: auto; }
  .studio-chat-empty { padding-block: 12px; }
  .studio-chat-empty-icon { display: none; }
  .studio-chat-footer { padding-block: 8px; }
  .studio-chat-input { min-height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-chat-root { scroll-behavior: auto; }
}