:root {
  --bg: #0f1420;
  --panel: #171e2e;
  --panel-2: #1d2639;
  --text: #e6ebf5;
  --muted: #8b96ad;
  --accent: #4f8cff;
  --accent-2: #2f6ae0;
  --danger: #e5534b;
  --radius: 10px;
  font-size: 15px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
}

.hidden { display: none !important; }
.muted { color: var(--muted); }
.error { color: var(--danger); font-size: .9em; margin-top: .5rem; }

/* Login */
.login-wrap { display: flex; align-items: center; justify-content: center; height: 100vh; }
.login-card {
  background: var(--panel); padding: 2rem; border-radius: var(--radius);
  width: 320px; display: flex; flex-direction: column; gap: .75rem;
}
.login-card h1 { margin: 0; font-size: 1.4rem; }
.login-card p { margin: 0 0 .5rem; }
.login-card input {
  background: var(--panel-2); border: 1px solid #2a3550; color: var(--text);
  padding: .6rem .8rem; border-radius: 8px; font-size: 1em;
}
.login-card button, .primary {
  background: var(--accent); color: #fff; border: none; padding: .6rem;
  border-radius: 8px; font-size: 1em; cursor: pointer;
}
.login-card button:hover, .primary:hover { background: var(--accent-2); }

/* Layout */
.app { display: grid; grid-template-columns: 280px 1fr; height: 100vh; }
.sidebar {
  background: var(--panel); padding: 1rem; display: flex; flex-direction: column;
  gap: .8rem; overflow-y: auto;
}
.sidebar-head { display: flex; justify-content: space-between; align-items: center; }
.user-name { font-weight: 600; font-size: .95em; }
.ghost { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.1em; }
.ghost:hover { color: var(--text); }

/* Весь сайдбар — одна прокручиваемая колонка (overflow на .sidebar). Список
   чатов не имеет своей прокрутки и не сжимается (flex-shrink: 0), иначе при
   нехватке места строки наезжают друг на друга. */
.sessions { display: flex; flex-direction: column; gap: 2px; }
.session-item {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: .3rem;
  padding: .45rem .6rem; border-radius: 8px; cursor: pointer; font-size: .9em; line-height: 1.25;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.session-item:hover { background: var(--panel-2); color: var(--text); }
.session-item.active { background: var(--panel-2); color: var(--text); }
.session-title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
/* Кнопка удаления появляется на наведении/фокусе, но на тач-экранах видна всегда. */
.session-delete {
  flex: 0 0 auto; opacity: 0; padding: 0 .25rem; border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: 1.1em; line-height: 1;
}
.session-item:hover .session-delete,
.session-delete:focus-visible { opacity: 1; }
.session-delete:hover { color: #e06c6c; }
@media (hover: none) { .session-delete { opacity: 1; } }

/* Секции сайдбара визуально разделены. */
.datasets { border-top: 1px solid rgba(255,255,255,.07); padding-top: .7rem; }
.datasets h3 { margin: 0 0 .5rem; font-size: .8em; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.dataset-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .85em; padding: .25rem 0; color: var(--muted);
}
.dataset-row .fresh { color: #4caf7d; }
.dataset-row .stale { color: #e0a63f; }
.dataset-row button { font-size: .8em; }

.appointment-row { display: flex; flex-direction: column; gap: 1px; padding: .3rem 0; font-size: .82em; }
.appointment-row .appt-when { color: #6fd6a0; font-variant-numeric: tabular-nums; }
.appointment-row .appt-doc { color: var(--muted); }
/* Прошедшие записи — приглушены и с пометкой. */
.appointment-row.past { opacity: .55; }
.appointment-row.past .appt-when { color: var(--muted); }

/* Chat */
.chat { display: flex; flex-direction: column; height: 100vh; }
.chat-toolbar {
  display: flex; justify-content: flex-end; gap: 12px; padding: .6rem 1.5rem 0;
}
.chat-toolbar .ghost { font-size: 0.72em; letter-spacing: 0.06em; padding: 0; }
.messages { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.msg { max-width: 760px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.msg.user {
  align-self: flex-end; background: var(--accent-2); padding: .7rem 1rem;
  border-radius: var(--radius); border-bottom-right-radius: 2px;
}
.msg.assistant { align-self: flex-start; }

/* Экспорт ответа (MD/PDF): полупрозрачный, проявляется при наведении */
.msg-actions { display: flex; gap: 12px; margin-top: 6px; opacity: 0.45; }
.msg.assistant:hover .msg-actions { opacity: 1; }
.msg-actions .ghost { font-size: 0.72em; letter-spacing: 0.06em; padding: 0; }

/* Экспорт в PDF: оверлей для печати. На экране скрыт, при печати виден он один. */
.print-area { display: none; }
.print-meta { color: #555; font-size: 12px; margin-bottom: 16px; }
@media print {
  /* Белый лист вне зависимости от галки «Фоновая графика» в диалоге печати. */
  html, body.printing {
    background: #fff !important; color: #111 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  body.printing > *:not(.print-area) { display: none !important; }
  body.printing .print-area {
    display: block; position: static;
    color: #111; background: #fff;
    font: 14px/1.55 -apple-system, 'Segoe UI', Roboto, sans-serif;
    padding: 0; margin: 0;
  }
  body.printing .print-area h1, body.printing .print-area h2, body.printing .print-area h3 { line-height: 1.3; }
  body.printing .print-area table { border-collapse: collapse; }
  body.printing .print-area th, body.printing .print-area td { border: 1px solid #999; padding: 4px 8px; }
  body.printing .print-area pre, body.printing .print-area code {
    font-family: ui-monospace, Menlo, monospace; background: #f2f2f2;
  }
  body.printing .print-area pre { padding: 8px; white-space: pre-wrap; word-break: break-word; }
  /* Экспорт всего чата: подписи ролей и реплики пользователя */
  body.printing .print-area .print-role {
    font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: #666; margin: 18px 0 6px; border-top: 1px solid #ddd; padding-top: 12px;
  }
  body.printing .print-area .print-role:first-of-type { border-top: none; padding-top: 0; }
  body.printing .print-area .print-user { white-space: pre-wrap; word-break: break-word; }
}

/* Rendered markdown inside assistant messages */
.msg.assistant p { margin: 0 0 .6rem; }
.msg.assistant p:last-child { margin-bottom: 0; }
.msg.assistant h1, .msg.assistant h2, .msg.assistant h3, .msg.assistant h4 {
  margin: .8rem 0 .4rem; font-size: 1.05em; font-weight: 650;
}
.msg.assistant ul, .msg.assistant ol { margin: .3rem 0 .6rem; padding-left: 1.4rem; }
.msg.assistant li { margin: .15rem 0; }
.msg.assistant strong { font-weight: 650; color: #fff; }
.msg.assistant code {
  background: var(--panel); padding: .1rem .35rem; border-radius: 5px;
  font-family: ui-monospace, monospace; font-size: .9em;
}
.msg.assistant pre {
  background: var(--panel); padding: .7rem .9rem; border-radius: 8px;
  overflow-x: auto; margin: .5rem 0;
}
.msg.assistant pre code { background: none; padding: 0; }
.msg.assistant a { color: var(--accent); }
.msg.assistant table {
  border-collapse: collapse; margin: .5rem 0; width: auto; max-width: 100%;
  display: block; overflow-x: auto; font-size: .92em;
}
.msg.assistant th, .msg.assistant td {
  border: 1px solid var(--panel-2); padding: .35rem .6rem; text-align: left;
}
.msg.assistant th { background: var(--panel); font-weight: 600; }
.msg.tool {
  align-self: flex-start; font-size: .8em; color: var(--muted);
  background: var(--panel); padding: .4rem .8rem; border-radius: 8px;
  font-family: ui-monospace, monospace;
}

/* Панель подтверждения действия (запись / второе мнение) */
.action-panel {
  align-self: flex-start; max-width: 620px; width: 100%;
  background: var(--panel); border: 1px solid #2a3550; border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: .8rem 1rem;
}
.action-title { font-size: .9em; margin-bottom: .6rem; }
.action-options { display: flex; flex-direction: column; gap: 6px; }
.action-opt {
  text-align: left; background: var(--panel-2); border: 1px solid #2a3550; color: var(--text);
  padding: .55rem .7rem; border-radius: 8px; cursor: pointer; font-size: .9em;
}
.action-opt:hover:not(:disabled) { border-color: var(--accent); }
.action-opt:disabled { opacity: .5; cursor: default; }
.action-opt.primary-opt { background: var(--accent); border-color: var(--accent); color: #fff; margin-top: .6rem; }
.action-opt .muted { color: var(--muted); }
.action-preview {
  background: var(--panel-2); border-radius: 8px; padding: .6rem .8rem; margin: 0;
  font-size: .82em; white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow-y: auto;
}
.action-done { color: #4caf7d; font-size: .92em; }
.action-error { color: var(--danger); font-size: .85em; margin-top: .5rem; }

/* Заметная карточка подтверждённой записи */
.action-panel.booking-done { border-left-color: #4caf7d; }
.booking-card {
  background: linear-gradient(180deg, rgba(76,175,125,.14), rgba(76,175,125,.04));
  border: 1px solid rgba(76,175,125,.35); border-radius: 10px; padding: .8rem 1rem;
}
.booking-head { font-size: 1.05em; font-weight: 650; color: #6fd6a0; margin-bottom: .6rem; }
.booking-row {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .22rem 0; font-size: .92em; border-top: 1px solid rgba(255,255,255,.05);
}
.booking-row:first-of-type { border-top: none; }
.booking-row .muted { color: var(--muted); font-size: .9em; }
.booking-hint { color: var(--muted); font-size: .85em; margin: .7rem 0 .4rem; }
.booking-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.booking-actions .action-opt { width: auto; flex: 0 1 auto; }
.msg .cursor { animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Claude-style thinking status */
.msg.thinking,
.msg.tool.thinking {
  align-self: flex-start;
  min-height: 1.4em;
  color: var(--muted);
  background: transparent;
  padding: 0.2rem 0;
  font-family: inherit;
  font-size: 0.95em;
}
.thinking-label {
  display: inline-block;
  font-size: 0.95em;
  letter-spacing: 0.01em;
  transition: opacity 0.16s ease;
  background: linear-gradient(
    90deg,
    var(--muted) 0%,
    #c5d0e6 35%,
    var(--muted) 70%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: thinking-shimmer 2.4s ease-in-out infinite;
}
@keyframes thinking-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: -100% 50%; }
}

.composer {
  display: flex; gap: .6rem; padding: 1rem 1.5rem; background: var(--panel);
}
.composer textarea {
  flex: 1; resize: none; background: var(--panel-2); border: 1px solid #2a3550;
  border-radius: var(--radius); color: var(--text); padding: .6rem .8rem; font-size: 1em;
  font-family: inherit;
}
.composer button {
  background: var(--accent); border: none; color: #fff; width: 46px;
  border-radius: var(--radius); font-size: 1.1em; cursor: pointer;
}
.composer button:disabled { opacity: .5; cursor: default; }

/* Embed (partner iframe / WebView) */
.embed-body .embed-app { grid-template-columns: 200px 1fr; }
.embed-sidebar { padding: .75rem; }
.embed-chat-bar { display: none; }
.embed-sidebar-close { display: none; }
.embed-backdrop { display: none; }
@media (max-width: 640px) {
  .embed-body .embed-app { grid-template-columns: 1fr; }
  .embed-chat-bar {
    display: flex; align-items: center; padding: .55rem 1rem;
    background: var(--panel); border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .embed-sessions-btn { font-size: .95em; color: var(--text); }
  .embed-sidebar-close { display: inline; }
  .embed-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 20;
  }
  .embed-body.sidebar-open .embed-backdrop { display: block; }
  .embed-sidebar {
    display: flex; position: fixed; top: 0; left: 0; bottom: 0; width: min(280px, 84vw);
    z-index: 30; transform: translateX(-105%); transition: transform .18s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.35);
  }
  .embed-body.sidebar-open .embed-sidebar { transform: translateX(0); }
}

/* --------------------------------------------------------------------------
   Embed chat design system
   The embed uses the LK light palette and keeps the legacy dark app untouched.
   -------------------------------------------------------------------------- */
.embed-body {
  --lk-fill-main: #fff;
  --lk-fill-primary: #eef5ff;
  --lk-fill-primary-accent: #54a0ff;
  --lk-fill-secondary: #f2f3f6;
  --lk-fill-secondary-highest: #d9dadd;
  --lk-text-heading: #2a3749;
  --lk-text-main: #2a3749;
  --lk-text-secondary: #50555d;
  --lk-text-tertiary: #949ba4;
  --lk-text-action: #54a0ff;
  --lk-text-notify: #f7236f;
  --lk-icon-main: #7a8ca4;
  --lk-border-default: #e5e7e9;
  --lk-border-accent: #e2edfd;
  --lk-radius-lg: 16px;
  --lk-radius-md: 12px;
  --lk-radius-sm: 8px;
  --lk-shadow-modal: 0 3px 2px rgba(104,104,104,.07), 0 7px 5px rgba(104,104,104,.05), 0 13px 10px rgba(104,104,104,.043), 0 22px 18px rgba(104,104,104,.035), 0 42px 33px rgba(104,104,104,.027);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--lk-fill-secondary);
  color: var(--lk-text-main);
  /* Iframe embeds can pass an explicit size (query params / postMessage, see embed.js)
     instead of relying on 100vh, which misbehaves in some WebViews. */
  height: var(--embed-vh, 100vh);
  width: var(--embed-vw, auto);
}
.embed-body .app.embed-app,
.embed-body .app.embed-app .chat { height: var(--embed-vh, 100vh); }

.embed-body .login-card,
.embed-body .sidebar,
.embed-body .composer,
.embed-body .embed-chat-bar { background: var(--lk-fill-main); }
.embed-body .login-card {
  width: min(343px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid var(--lk-border-default);
  border-radius: var(--lk-radius-lg);
  box-shadow: var(--lk-shadow-modal);
}
.embed-body .login-card h1 { color: var(--lk-text-heading); font-size: 20px; line-height: 24px; font-weight: 600; letter-spacing: -.5px; }
.embed-body .muted { color: var(--lk-text-tertiary); }
.embed-body .error { color: var(--lk-text-notify); }
.embed-body .app { background: var(--lk-fill-secondary); }
.embed-body .sidebar { border-right: 1px solid var(--lk-border-default); padding: 16px; gap: 12px; }
.embed-body .sidebar-head { min-height: 24px; }
.embed-body .user-name { color: var(--lk-text-heading); font-size: 15px; line-height: 20px; font-weight: 600; }
.embed-body .ghost { color: var(--lk-icon-main); font-size: 14px; }
.embed-body .ghost:hover { color: var(--lk-text-main); }
.embed-body .primary,
.embed-body .composer button { background: var(--lk-fill-primary-accent); border-radius: var(--lk-radius-md); font-weight: 500; }
.embed-body .primary:hover,
.embed-body .composer button:hover { background: #428fe9; }
.embed-body .session-item { color: var(--lk-text-secondary); border-radius: var(--lk-radius-md); padding: 8px 12px; font-size: 14px; line-height: 20px; }
.embed-body .session-item:hover,
.embed-body .session-item.active { background: var(--lk-fill-primary); color: var(--lk-text-heading); }
.embed-body .chat { background: var(--lk-fill-main); }
.embed-body .messages { padding: 24px; gap: 16px; }
.embed-body .msg { color: var(--lk-text-main); font-size: 15px; line-height: 20px; letter-spacing: -.4px; }
.embed-body .msg.user { background: var(--lk-fill-primary); color: var(--lk-text-heading); padding: 12px 16px; border-radius: var(--lk-radius-lg); border-bottom-right-radius: var(--lk-radius-sm); }
.embed-body .msg.assistant strong { color: var(--lk-text-heading); }
.embed-body .msg.assistant a { color: var(--lk-text-action); }
.embed-body .msg.assistant code,
.embed-body .msg.assistant pre,
.embed-body .msg.tool { background: var(--lk-fill-secondary); }
.embed-body .msg.assistant th { background: var(--lk-fill-secondary); }
.embed-body .msg.assistant th, .embed-body .msg.assistant td { border-color: var(--lk-border-default); }
.embed-body .composer { border-top: 1px solid var(--lk-border-default); padding: 16px 24px 20px; gap: 8px; }
.embed-body .composer textarea { background: var(--lk-fill-secondary); border: 1px solid transparent; color: var(--lk-text-main); border-radius: var(--lk-radius-sm); padding: 12px; font-size: 15px; line-height: 20px; }
.embed-body .composer textarea:focus { outline: 2px solid var(--lk-border-accent); border-color: var(--lk-fill-primary-accent); }
.embed-body .composer textarea::placeholder { color: #c9ccd1; }
.embed-body .composer button { width: 44px; color: #fff; }

@media (max-width: 640px) {
  .embed-body .messages { padding: 16px; }
  .embed-body .composer { padding: 12px 16px 16px; }
  .embed-body .embed-chat-bar { border-bottom-color: var(--lk-border-default); }
  .embed-body .embed-sessions-btn { color: var(--lk-text-heading); }
  .embed-body .embed-sidebar { box-shadow: var(--lk-shadow-modal); }
}