@charset "UTF-8";

:root {
      --bg: #f5f6fb;
      --surface: #ffffff;
      --surface-soft: #f7f8fc;
      --surface-strong: #eef1fb;
      --text: #171923;
      --muted: #697386;
      --line: #e1e6f0;
      --line-strong: #d3dbe9;
      --primary: #5447e8;
      --primary-hover: #4638d5;
      --primary-soft: #eef0ff;
      --blue: #2563eb;
      --blue-soft: #eff6ff;
      --green: #15803d;
      --green-soft: #ecfdf3;
      --amber: #b45309;
      --amber-soft: #fff7ed;
      --danger: #dc2626;
      --danger-soft: #fef2f2;
      --shadow: 0 14px 36px rgba(18, 27, 53, 0.07);
      --shadow-soft: 0 8px 22px rgba(18, 27, 53, 0.05);
      --radius-xl: 22px;
      --radius-lg: 18px;
      --radius-md: 14px;
      --radius-sm: 11px;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      height: 100%;
      margin: 0;
      overflow: hidden;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: var(--bg);
      color: var(--text);
      letter-spacing: -0.02em;
    }

    button,
    input,
    textarea,
    select {
      font: inherit;
    }

    button {
      border: 0;
      cursor: pointer;
      background: transparent;
      color: inherit;
    }

    textarea {
      resize: none;
    }

    svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.9;
    }

    .app {
      height: 100vh;
      display: grid;
      grid-template-columns: 264px minmax(0, 1fr);
      background:
        radial-gradient(circle at top left, rgba(84, 71, 232, 0.06), transparent 28%),
        radial-gradient(circle at 82% 12%, rgba(37, 99, 235, 0.05), transparent 24%),
        var(--bg);
    }

    .sidebar {
      min-width: 0;
      height: 100vh;
      padding: 18px;
      display: flex;
      flex-direction: column;
      background: rgba(255, 255, 255, 0.88);
      border-right: 1px solid rgba(211, 219, 233, 0.9);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 6px 4px 18px;
    }

    .brand-mark {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      color: white;
      flex: 0 0 auto;
      background: linear-gradient(135deg, #4f46e5, #7c3aed);
      box-shadow: 0 14px 28px rgba(79, 70, 229, 0.22);
    }

    .brand-copy {
      min-width: 0;
      flex: 1;
    }

    .brand-title {
      font-size: 15px;
      font-weight: 800;
      line-height: 1.2;
    }

    .brand-subtitle {
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .primary-action {
      width: 100%;
      min-height: 50px;
      padding: 0 16px;
      border-radius: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: white;
      background: linear-gradient(135deg, var(--primary), #6d5dfc);
      font-size: 14px;
      font-weight: 800;
      box-shadow: 0 14px 28px rgba(79, 70, 229, 0.2);
      transition: 160ms ease;
    }

    .primary-action:hover {
      background: linear-gradient(135deg, var(--primary-hover), #6254f5);
      transform: translateY(-1px);
      box-shadow: 0 18px 34px rgba(79, 70, 229, 0.24);
    }

    .sidebar-search-wrap {
      position: relative;
      z-index: 40;
      margin-top: 12px;
    }

    .search-box {
      min-height: 42px;
      padding: 0 12px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.84);
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      transition: 160ms ease;
    }

    .search-box:focus-within,
    .search-box:hover {
      background: white;
      border-color: var(--line-strong);
    }

    .search-box input {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: none;
      background: transparent;
      color: var(--text);
      font-size: 13px;
      font-weight: 500;
    }

    .search-box input::placeholder {
      color: #8490a4;
    }

    .kbd {
      margin-left: auto;
      min-width: 32px;
      height: 24px;
      padding: 0 7px;
      border-radius: 8px;
      border: 1px solid var(--line);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--surface-soft);
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
    }

    .sidebar-search-results {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      right: 0;
      display: grid;
      gap: 7px;
      padding: 10px;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 24px 58px rgba(15, 23, 42, 0.16);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .sidebar-search-results[hidden] {
      display: none !important;
    }

    .sidebar-search-caption {
      padding: 1px 4px 5px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .sidebar-search-item {
      width: 100%;
      padding: 10px 11px;
      border-radius: 13px;
      border: 1px solid transparent;
      background: var(--surface-soft);
      display: grid;
      gap: 4px;
      text-align: left;
      transition: 160ms ease;
    }

    .sidebar-search-item:hover {
      border-color: #d9ddff;
      background: var(--primary-soft);
      transform: translateY(-1px);
    }

    .sidebar-search-item-title {
      font-size: 13px;
      font-weight: 800;
      line-height: 1.35;
    }

    .sidebar-search-item-meta {
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.4;
    }

    .sidebar-search-empty {
      padding: 12px 10px;
      border-radius: 13px;
      background: var(--surface-soft);
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .side-section {
      margin-top: 18px;
      /* Flexible column container — no overflow-y here.
         Only the inner .recent-list should scroll. */
      display: flex;
      flex-direction: column;
      /* Stay within the 264px sidebar column; min-width:0 lets it shrink */
      width: 100%;
      min-width: 0;
      min-height: 0;
    }

    /* Only the section containing the recent chat list should consume
       remaining vertical space so its inner list becomes scrollable.
       Using :has() avoids needing a structural/positional selector. */
    .side-section:has(.recent-list) {
      flex: 1;
      min-height: 0;
      /* Hide any accidental bleed; the recent-list itself handles scroll */
      overflow: hidden;
    }

    .side-label {
      padding: 0 10px 8px;
      color: #7a8497;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    /* Navigation list — sized by its content, NEVER scrolls.
       Removing overflow-y here fixes the unwanted scroll bar that
       previously appeared in the panel above recent chats. */
    .nav-list {
      display: flex;
      flex-direction: column;
      gap: 5px;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }

    /* Recent chats — the ONLY scrollable area in the sidebar.
       flex: 1 + min-height: 0 lets it fill remaining height inside
       its flex-column parent and overflow-y: auto enables scroll. */
    .recent-list {
      display: flex;
      flex-direction: column;
      gap: 5px;
      flex: 1;
      overflow-y: auto;
      /* overflow-x hidden prevents horizontal scroll caused by
         long titles or padding inside .history-row */
      overflow-x: hidden;
      min-height: 0;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }

    .nav-item,
    .recent-item {
      width: 100%;
      text-align: left;
      transition: 160ms ease;
    }

    .nav-item {
      min-height: 42px;
      padding: 0 11px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      gap: 11px;
      color: #384153;
    }

    .nav-item:hover {
      color: var(--text);
      background: rgba(84, 71, 232, 0.08);
    }

    .nav-item.active {
      background: var(--primary-soft);
      color: var(--primary);
      font-weight: 800;
    }

    .nav-item.locked {
      opacity: 0.56;
      cursor: not-allowed;
      background: rgba(241, 245, 249, 0.62);
    }

    .nav-item.locked:hover {
      color: #384153;
      background: rgba(241, 245, 249, 0.62);
    }

    .nav-icon {
      width: 20px;
      height: 20px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
    }

    .nav-copy {
      min-width: 0;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
    }

    .nav-lock {
      width: 22px;
      height: 22px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.86);
      color: #64748b;
      flex: 0 0 auto;
    }

    .nav-lock svg {
      width: 13px;
      height: 13px;
      stroke-width: 2;
    }

    .recent-item {
      padding: 9px 10px;
      border-radius: 14px;
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }

    .recent-item:hover {
      background: rgba(84, 71, 232, 0.07);
    }

    .recent-dot {
      width: 8px;
      height: 8px;
      margin-top: 5px;
      border-radius: 999px;
      flex: 0 0 auto;
    }

    .recent-dot.blue {
      background: #2563eb;
    }

    .recent-dot.amber {
      background: #d97706;
    }

    .recent-dot.green {
      background: #16a34a;
    }

    /* ============================================================
       STATUS DOT
       Small circular indicator used in lists/rows to convey state.
       Convention: green = active, yellow/amber = inactive/pending.
       ============================================================ */
    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      display: inline-block;
      flex: 0 0 auto;
      background: #cbd5e1; /* default neutral */
    }

    .status-dot.green {
      /* active */
      background: #16a34a;
    }

    /* All non-green states map to a yellow/amber "inactive/pending"
       color per design requirement (green=active, yellow=inactive). */
    .status-dot.amber,
    .status-dot.blue,
    .status-dot.gray,
    .status-dot.red {
      background: #eab308; /* yellow-500 */
    }

    .recent-copy {
      min-width: 0;
    }

    .recent-title {
      color: #334155;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.35;
      /* min-width: 0 is required for text-overflow to work inside a flex/grid
         ancestor — without it the element refuses to shrink below its content width */
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .recent-meta {
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.38;
    }

    .sidebar-footer {
      margin-top: auto;
      padding-top: 16px;
      border-top: 1px solid var(--line);
    }

    .profile-card {
      padding: 11px;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.9);
      display: flex;
      align-items: center;
      gap: 11px;
    }

    .avatar {
      width: 38px;
      height: 38px;
      flex: 0 0 auto;
      border-radius: 13px;
      display: grid;
      place-items: center;
      color: white;
      background: linear-gradient(135deg, #111827, #4f46e5);
      font-size: 12px;
      font-weight: 800;
    }

    .profile-name {
      font-size: 13px;
      font-weight: 800;
      line-height: 1.3;
    }

    .profile-role {
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .workspace {
      min-width: 0;
      height: 100vh;
      display: grid;
      grid-template-rows: 58px minmax(0, 1fr);
      background: rgba(255,255,255,0.18);
    }

    .utility-rail {
      min-width: 0;
      height: 58px;
      padding: 0 22px;
      border-bottom: 1px solid rgba(211, 219, 233, 0.92);
      background: rgba(250, 251, 255, 0.88);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .rail-left {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .rail-back-btn {
      min-height: 36px;
      padding: 0 11px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.86);
      color: #475569;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
      transition: 160ms ease;
      flex: 0 0 auto;
    }

    .rail-back-btn:hover {
      color: var(--primary);
      border-color: var(--line-strong);
      background: white;
    }

    .rail-back-btn[hidden] {
      display: none !important;
    }

    .rail-back-btn svg {
      width: 16px;
      height: 16px;
    }

    .rail-context {
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 3px;
    }

    .rail-title {
      min-width: 0;
      max-width: min(760px, 52vw);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 15px;
      line-height: 1.2;
      font-weight: 800;
    }

    .rail-meta {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.3;
      font-weight: 800;
      white-space: nowrap;
      overflow: hidden;
    }

    .rail-meta-dot {
      width: 4px;
      height: 4px;
      border-radius: 999px;
      background: #cbd5e1;
      flex: 0 0 auto;
    }

    .rail-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex: 0 0 auto;
    }

    .rail-action {
      height: 40px;
      width: 42px;
      padding: 0 11px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.86);
      color: #475569;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      overflow: hidden;
      white-space: nowrap;
      transition: width 180ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
      box-shadow: none;
    }

    .rail-action:hover,
    .rail-action:focus-visible {
      color: var(--primary);
      border-color: #d8dcff;
      background: rgba(255,255,255,0.98);
      transform: translateY(-1px);
    }

    .rail-action svg {
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
    }

    .rail-action-label {
      max-width: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-width 180ms ease, opacity 140ms ease;
      font-size: 12px;
      font-weight: 800;
    }

    .rail-action:hover .rail-action-label,
    .rail-action:focus-visible .rail-action-label {
      max-width: 120px;
      opacity: 1;
    }

    .rail-action.notifications-action:hover,
    .rail-action.notifications-action:focus-visible {
      width: 156px;
    }

    .rail-action.new-action:hover,
    .rail-action.new-action:focus-visible {
      width: 104px;
    }

    .rail-action.context-action:hover,
    .rail-action.context-action:focus-visible {
      width: 122px;
    }

    .rail-action.active {
      color: var(--primary);
      border-color: #d8dcff;
      background: var(--primary-soft);
    }

    .rail-action[hidden] {
      display: none !important;
    }

    .notification-count {
      min-width: 21px;
      height: 21px;
      padding: 0 7px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: white;
      background: var(--primary);
      font-size: 11px;
      font-weight: 900;
      flex: 0 0 auto;
    }

    .content {
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      padding: 0;
    }

    .view {
      display: none;
      height: 100%;
      min-height: 0;
    }

    .view.active {
      display: block;
    }

    .solid-btn,
    .ghost-btn,
    .soft-btn,
    .danger-btn {
      min-height: 42px;
      padding: 0 14px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 800;
      transition: 160ms ease;
    }

    .solid-btn {
      color: white;
      background: var(--primary);
      box-shadow: 0 12px 26px rgba(79, 70, 229, 0.18);
    }

    .solid-btn:hover {
      background: var(--primary-hover);
      transform: translateY(-1px);
    }

    .ghost-btn {
      color: #475569;
      border: 1px solid var(--line);
      background: white;
    }

    .ghost-btn:hover {
      border-color: var(--line-strong);
      background: var(--surface-soft);
    }

    .soft-btn {
      color: var(--primary);
      background: var(--primary-soft);
      border: 1px solid #dfe3ff;
    }

    .soft-btn:hover {
      background: #e6e9ff;
    }

    .danger-btn {
      color: var(--danger);
      background: var(--danger-soft);
      border: 1px solid #fecaca;
    }

    .danger-btn:hover {
      background: #fee2e2;
    }

    .status-pill {
      min-height: 23px;
      padding: 0 8px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.02em;
    }

    .status-pill.blue {
      color: var(--blue);
      background: var(--blue-soft);
    }

    .status-pill.green {
      color: var(--green);
      background: var(--green-soft);
    }

    .status-pill.amber {
      color: var(--amber);
      background: var(--amber-soft);
    }

    .status-pill.gray {
      color: #475569;
      background: #f1f5f9;
    }

    .status-pill.red {
      color: var(--danger);
      background: var(--danger-soft);
    }

    .dashboard-page,
    .history-page,
    .knowledge-page,
    .templates-page {
      height: 100%;
      min-height: 0;
      overflow-y: auto;
      padding: 20px 28px 28px;
    }

    .surface-card {
      border-radius: var(--radius-lg);
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.94);
      box-shadow: var(--shadow-soft);
    }

    /* Главная */

    .dashboard-grid {
      display: grid;
      gap: 18px;
      align-content: start;
    }

    .dashboard-top-grid,
    .dashboard-bottom-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.65fr);
      gap: 18px;
      align-items: stretch;
    }

    .chat-launcher {
      padding: 20px;
      border-radius: var(--radius-xl);
      color: white;
      background:
        linear-gradient(135deg, rgba(79, 70, 229, 0.98), rgba(76, 29, 149, 0.94)),
        radial-gradient(circle at top right, rgba(255,255,255,0.2), transparent 32%);
      box-shadow: var(--shadow);
      display: grid;
      gap: 16px;
    }

    .chat-launcher-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
    }

    .launcher-kicker,
    .card-kicker {
      color: inherit;
      opacity: 0.78;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.07em;
    }

    .launcher-title {
      margin-top: 6px;
      font-size: 25px;
      font-weight: 800;
      line-height: 1.15;
    }

    .launcher-desc {
      margin-top: 8px;
      max-width: 720px;
      color: rgba(255,255,255,0.86);
      font-size: 14px;
      line-height: 1.55;
    }

    .launcher-body {
      padding: 12px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.12);
      display: grid;
      gap: 12px;
    }

    .launcher-textarea {
      width: 100%;
      min-height: 110px;
      padding: 15px 16px;
      border: 0;
      outline: none;
      border-radius: 16px;
      background: rgba(255,255,255,0.98);
      color: var(--text);
      font-size: 14px;
      line-height: 1.55;
    }

    .launcher-textarea::placeholder {
      color: #7d8798;
    }

    .launcher-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .micro-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .micro-chip {
      min-height: 34px;
      padding: 0 11px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.14);
      color: white;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      font-weight: 800;
    }

    .micro-chip svg {
      width: 17px;
      height: 17px;
    }

    .dashboard-side-card,
    .active-chats-card,
    .materials-card {
      padding: 18px;
    }

    .section-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
    }

    .card-kicker {
      color: var(--muted);
      opacity: 1;
    }

    .card-title {
      margin-top: 5px;
      font-size: 19px;
      font-weight: 800;
      line-height: 1.3;
    }

    .quick-grid {
      margin-top: 15px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .quick-tile {
      min-height: 104px;
      padding: 14px;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: white;
      display: grid;
      gap: 10px;
      align-content: space-between;
      text-align: left;
      transition: 160ms ease;
    }

    .quick-tile:hover {
      transform: translateY(-1px);
      border-color: #cfd6ea;
      box-shadow: var(--shadow-soft);
    }

    .tile-icon,
    .material-icon,
    .doc-icon,
    .template-icon {
      width: 38px;
      height: 38px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      color: var(--primary);
      background: var(--primary-soft);
      flex: 0 0 auto;
    }

    .tile-title {
      color: #283244;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.35;
    }

    .tile-desc {
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .text-link {
      min-height: 36px;
      padding: 0 11px;
      border-radius: 12px;
      background: var(--surface-soft);
      color: var(--primary);
      font-size: 13px;
      font-weight: 800;
      transition: 160ms ease;
    }

    .text-link:hover {
      background: var(--primary-soft);
    }

    .active-chat-list {
      margin-top: 15px;
      display: grid;
      gap: 11px;
    }

    .active-chat-card {
      width: 100%;
      padding: 15px;
      border: 1px solid var(--line);
      border-radius: 17px;
      background: white;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: stretch;
      text-align: left;
      transition: 160ms ease;
    }

    .active-chat-card:hover {
      transform: translateY(-1px);
      border-color: #cfd6ea;
      box-shadow: var(--shadow-soft);
    }

    .active-chat-title-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .active-chat-title {
      font-size: 15px;
      font-weight: 800;
      line-height: 1.4;
    }

    .active-chat-desc {
      margin-top: 6px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.48;
    }

    .active-progress {
      margin-top: 12px;
      display: grid;
      gap: 7px;
    }

    .progress-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .progress-track {
      width: 100%;
      height: 7px;
      border-radius: 999px;
      background: #edf0f8;
      overflow: hidden;
    }

    .progress-bar {
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--primary), #7c3aed);
    }

    .active-chat-side {
      min-width: 118px;
      display: grid;
      align-content: space-between;
      justify-items: end;
      gap: 14px;
    }

    .active-chat-time {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      line-height: 1.4;
      text-align: right;
    }

    .active-chat-arrow {
      width: 36px;
      height: 36px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      color: var(--primary);
      background: var(--surface-soft);
    }

    .materials-list {
      margin-top: 15px;
      display: grid;
      gap: 10px;
    }

    .material-row {
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: white;
      display: flex;
      align-items: center;
      gap: 11px;
    }

    .material-copy {
      min-width: 0;
    }

    .material-title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.35;
    }

    .material-meta {
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    /* Чат: не карточка, а рабочая плоскость */

    .chat-workspace {
      position: relative;
      height: 100%;
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      background:
        radial-gradient(circle at top center, rgba(84, 71, 232, 0.035), transparent 36%),
        linear-gradient(180deg, rgba(249, 250, 255, 0.72), rgba(255, 255, 255, 0.96));
    }

    .chat-workspace.context-open {
      grid-template-columns: minmax(0, 1fr) 320px;
    }

    .chat-main {
      position: relative;
      min-width: 0;
      min-height: 0;
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
    }

    .chat-page-action-bar {
      position: absolute;
      top: 16px;
      right: 24px;
      z-index: 4;
    }

    .chat-page-action {
      min-height: 38px;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.94);
      color: #475569;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 800;
      box-shadow: var(--shadow-soft);
      transition: 160ms ease;
    }

    .chat-page-action:hover,
    .chat-page-action.active {
      color: var(--primary);
      border-color: #d8dcff;
      background: var(--primary-soft);
    }

    .chat-page-action svg {
      width: 17px;
      height: 17px;
      flex: 0 0 auto;
    }

    .chat-scroll {
      min-height: 0;
      overflow-y: auto;
      padding: 26px 28px 20px;
    }

    .thread {
      width: min(900px, 100%);
      margin: 0 auto;
      display: grid;
      gap: 20px;
      align-content: start;
    }

    .bubble-row {
      width: 100%;
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }

    .bubble-row.user {
      justify-content: flex-end;
    }

    .thread-avatar {
      width: 32px;
      height: 32px;
      margin-top: 2px;
      flex: 0 0 auto;
      border-radius: 12px;
      display: grid;
      place-items: center;
      font-size: 11px;
      font-weight: 900;
    }

    .thread-avatar.ai {
      color: var(--primary);
      background: var(--primary-soft);
    }

    .bubble {
      max-width: min(760px, 80%);
      font-size: 15px;
      line-height: 1.68;
      color: #263041;
    }

    .bubble.ai {
      padding: 5px 0 8px;
      background: transparent;
      /* Min-width keeps the bubble visible while only the preparing
         indicator is rendered, before any chunks arrive. */
      min-width: 60px;
    }

    .bubble.user {
      max-width: min(650px, 78%);
      padding: 14px 16px;
      border-radius: 21px;
      border-top-right-radius: 10px;
      color: white;
      background: #111827;
      box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
    }

    .empty-chat {
      min-height: 100%;
      display: grid;
      place-items: center;
      padding: 28px;
    }

    .empty-chat-card {
      width: min(640px, 100%);
      text-align: center;
      display: grid;
      gap: 11px;
    }

    .empty-chat-icon {
      width: 58px;
      height: 58px;
      margin: 0 auto;
      border-radius: 19px;
      display: grid;
      place-items: center;
      color: var(--primary);
      background: var(--primary-soft);
      box-shadow: var(--shadow-soft);
    }

    .empty-chat-title {
      font-size: 24px;
      font-weight: 800;
      line-height: 1.2;
    }

    .empty-chat-desc {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.58;
    }

    .starter-prompts {
      margin-top: 5px;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
    }

    .starter-prompt {
      min-height: 38px;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: white;
      color: #475569;
      font-size: 13px;
      font-weight: 800;
      transition: 160ms ease;
    }

    .starter-prompt:hover {
      color: var(--primary);
      border-color: #d9ddff;
      background: var(--primary-soft);
    }

    /* Loading state shown while history is being fetched. */
    .chat-loading {
      padding: 24px;
      color: var(--muted);
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 10px;
      justify-content: center;
    }

    .composer-shell {
      border-top: 1px solid var(--line);
      padding: 14px 28px 18px;
      background: rgba(255, 255, 255, 0.98);
    }

    .composer-inner {
      width: min(900px, 100%);
      margin: 0 auto;
      display: grid;
      gap: 11px;
    }

    .chat-tool-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }

    .tool-chip {
      min-height: 35px;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: white;
      color: #475569;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      font-weight: 800;
      transition: 160ms ease;
    }

    .tool-chip:hover,
    .tool-chip.active {
      color: var(--primary);
      border-color: #d9ddff;
      background: var(--primary-soft);
    }

    .tool-chip svg {
      width: 16px;
      height: 16px;
    }

    .composer-box {
      min-height: 64px;
      padding: 7px;
      border-radius: 23px;
      border: 1px solid var(--line);
      background: var(--surface-soft);
      display: flex;
      align-items: flex-end;
      gap: 10px;
      transition: 160ms ease;
    }

    .composer-box:focus-within {
      background: white;
      border-color: rgba(84, 71, 232, 0.46);
      box-shadow: 0 0 0 4px rgba(84, 71, 232, 0.08);
    }

    .chat-textarea {
      width: 100%;
      min-height: 50px;
      max-height: 180px;
      padding: 14px 12px;
      border: 0;
      outline: none;
      background: transparent;
      color: var(--text);
      font-size: 14px;
      line-height: 1.55;
    }

    .chat-textarea::placeholder {
      color: #8490a4;
    }

    .send-btn {
      width: 48px;
      height: 48px;
      flex: 0 0 auto;
      border-radius: 18px;
      display: grid;
      place-items: center;
      color: white;
      background: var(--primary);
      box-shadow: 0 14px 28px rgba(79, 70, 229, 0.2);
      transition: 160ms ease;
    }

    .send-btn:hover {
      background: var(--primary-hover);
      transform: translateY(-1px);
    }

    .send-btn svg {
      width: 20px;
      height: 20px;
    }

    .composer-note {
      padding-left: 2px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .chat-context {
      min-width: 0;
      min-height: 0;
      overflow-y: auto;
      display: none;
      gap: 14px;
      align-content: start;
      padding: 18px;
      border-left: 1px solid var(--line);
      background: rgba(248, 249, 253, 0.92);
    }

    .chat-workspace.context-open .chat-context {
      display: grid;
    }

    .context-card {
      padding: 16px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.96);
      box-shadow: var(--shadow-soft);
    }

    .context-title {
      font-size: 14px;
      font-weight: 800;
      line-height: 1.35;
    }

    .context-subtitle {
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .context-list {
      margin-top: 13px;
      display: grid;
      gap: 9px;
    }

    .context-item {
      padding: 11px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: var(--surface-soft);
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }

    .context-mark {
      width: 22px;
      height: 22px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      font-size: 11px;
      font-weight: 900;
    }

    .context-mark.done {
      color: var(--green);
      background: var(--green-soft);
    }

    .context-mark.now {
      color: var(--primary);
      background: var(--primary-soft);
    }

    .context-mark.wait {
      color: #64748b;
      background: white;
      border: 1px solid var(--line-strong);
    }

    .context-copy-title {
      color: #263041;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.4;
    }

    .context-copy-meta {
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .context-action {
      width: 100%;
      padding: 11px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: var(--surface-soft);
      text-align: left;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: 160ms ease;
    }

    .context-action:hover {
      border-color: #cfd6ea;
      background: white;
    }

    .context-action-copy {
      min-width: 0;
      flex: 1;
    }

    .context-action-title {
      font-size: 13px;
      font-weight: 800;
      line-height: 1.4;
    }

    .context-action-meta {
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .context-action-arrow {
      color: var(--muted);
      flex: 0 0 auto;
    }

    /* История: без большого контейнера-страницы */

    .history-list {
      display: grid;
      gap: 10px;
      align-content: start;
    }

    .history-row {
      width: 100%;
      /* Cap width so padding never causes horizontal container overflow */
      max-width: 100%;
      box-sizing: border-box;
      min-height: 84px;
      padding: 13px 15px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255,255,255,0.96);
      /* Flex column instead of grid so child rows (.history-row-top,
         .history-row-summary, .history-row-meta) stack predictably
         and individual flex behavior on children works without
         grid track sizing interfering with text-ellipsis. */
      display: flex;
      flex-direction: column;
      gap: 7px;
      text-align: left;
      transition: 160ms ease;
      box-shadow: var(--shadow-soft);
    }

    .history-row:hover {
      border-color: #cfd6ea;
      background: #fdfdff;
      transform: translateY(-1px);
      box-shadow: var(--shadow);
    }

    /* Selected history row: subtle blue tint + distinct left border
       to clearly indicate the current selection. The left border is
       implemented via border-left so it stacks cleanly with the
       existing 1px outer border without layout shift on hover. */
    .history-row.selected {
      border-color: #bfdbfe;
      border-left: 4px solid var(--blue);
      background: var(--blue-soft);
      padding-left: 12px; /* compensate for thicker left border (15px - 3px) */
    }

    .history-row.selected:hover {
      /* Keep selection visual cues dominant over hover state */
      border-color: #bfdbfe;
      border-left: 4px solid var(--blue);
      background: #e6f0ff;
      box-shadow: var(--shadow);
    }

    .history-row-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      /* No flex-wrap: keep title and status pill on the same line.
         The title shrinks (with ellipsis) instead of pushing the pill
         onto a new line. */
      min-width: 0;
    }

    .history-row-title {
      /* flex: 1 lets the title fill remaining space, while
         min-width: 0 is REQUIRED for text-overflow: ellipsis to
         work inside a flex container. */
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 15px;
      font-weight: 800;
      line-height: 1.4;
    }

    /* Status pill sits next to title in .history-row-top — must
       not shrink, otherwise long titles would squash it. */
    .history-row-top > .status-pill {
      flex-shrink: 0;
    }

    .history-row-summary {
      max-width: 980px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .history-row-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      /* Keep date/meta on a single line and prevent it from being
         compressed when its parent (flex column) lays it out. */
      flex-shrink: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #526071;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.4;
    }

    .meta-dot {
      width: 4px;
      height: 4px;
      border-radius: 999px;
      background: #cbd5e1;
    }

    /* База знаний: операционная поверхность, а не витрина */

    .knowledge-layout {
      display: grid;
      gap: 14px;
      align-content: start;
    }

    .knowledge-upload-strip {
      min-height: 68px;
      padding: 12px 14px;
      border-radius: 18px;
      border: 1.5px dashed #cbd5e1;
      background: rgba(255,255,255,0.94);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      cursor: pointer;
      outline: none;
      transition: 160ms ease;
      box-shadow: var(--shadow-soft);
    }

    .knowledge-upload-strip:hover,
    .knowledge-upload-strip:focus-visible,
    .knowledge-upload-strip.drag-over {
      border-color: rgba(84, 71, 232, 0.58);
      background: rgba(255,255,255,0.99);
      box-shadow: inset 0 0 0 4px rgba(84, 71, 232, 0.05), var(--shadow-soft);
    }

    /* Generic drag-over indicator – applied via JS to any drop target */
    .drag-over {
      border: 2px dashed var(--accent, #6366f1);
      background: rgba(99,102,241, 0.05);
    }

    .upload-main {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .upload-icon {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      color: var(--primary);
      background: var(--primary-soft);
      flex: 0 0 auto;
    }

    .upload-title {
      font-size: 14px;
      font-weight: 800;
      line-height: 1.35;
    }

    .upload-desc {
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .upload-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 0 0 auto;
    }

    .upload-pick {
      min-height: 38px;
      padding: 0 12px;
      border-radius: 13px;
      border: 1px solid #dfe3ff;
      background: var(--primary-soft);
      color: var(--primary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      font-size: 13px;
      font-weight: 800;
      white-space: nowrap;
      transition: 160ms ease;
    }

    .upload-pick:hover {
      background: #e5e9ff;
    }

    .knowledge-controls-flat {
      display: grid;
      gap: 12px;
    }

    .knowledge-command-row {
      display: grid;
      grid-template-columns: minmax(260px, 1fr) auto;
      gap: 12px;
      align-items: center;
    }

    .knowledge-search-shell {
      min-height: 44px;
      padding: 0 13px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.94);
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      transition: 160ms ease;
      box-shadow: var(--shadow-soft);
    }

    .knowledge-search-shell:focus-within {
      background: white;
      border-color: rgba(84, 71, 232, 0.46);
      box-shadow: 0 0 0 4px rgba(84, 71, 232, 0.08);
    }

    .knowledge-search-input {
      width: 100%;
      border: 0;
      outline: none;
      background: transparent;
      color: var(--text);
      font-size: 14px;
    }

    .knowledge-search-input::placeholder {
      color: #8490a4;
    }

    .knowledge-command-actions {
      display: flex;
      align-items: center;
      gap: 9px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .sort-select {
      min-height: 44px;
      padding: 0 13px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: white;
      color: #334155;
      font-size: 13px;
      font-weight: 800;
      outline: none;
      cursor: pointer;
      box-shadow: var(--shadow-soft);
    }

    .knowledge-filter-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .knowledge-filter-tabs,
    .knowledge-summary-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .knowledge-filter {
      min-height: 36px;
      padding: 0 12px;
      border-radius: 12px;
      border: 1px solid transparent;
      background: rgba(255,255,255,0.92);
      color: #475569;
      font-size: 13px;
      font-weight: 800;
      transition: 160ms ease;
      box-shadow: var(--shadow-soft);
    }

    .knowledge-filter:hover {
      background: white;
      border-color: var(--line);
    }

    .knowledge-filter.active {
      color: var(--primary);
      border-color: #d8dcff;
      background: var(--primary-soft);
    }

    .knowledge-stat {
      min-height: 34px;
      padding: 0 11px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.92);
      color: #475569;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
      box-shadow: var(--shadow-soft);
    }

    .knowledge-stat strong {
      color: var(--text);
      font-weight: 900;
    }

    .selection-toolbar {
      min-height: 58px;
      padding: 11px 13px;
      border-radius: 16px;
      border: 1px solid #dfe3ff;
      background: linear-gradient(180deg, #f8f8ff, #ffffff);
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      box-shadow: var(--shadow-soft);
    }

    .selection-toolbar.active {
      display: flex;
    }

    .selection-info {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #3730a3;
      font-size: 13px;
      font-weight: 900;
    }

    .selection-dot {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: var(--primary);
      flex: 0 0 auto;
    }

    .selection-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }

    .document-table {
      overflow: hidden;
      border-radius: var(--radius-lg);
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.96);
      box-shadow: var(--shadow-soft);
    }

    .table-head,
    .doc-row {
      display: grid;
      grid-template-columns: 40px minmax(320px, 1.7fr) 130px 124px 132px 96px 104px;
      gap: 14px;
      align-items: center;
      padding: 13px 18px;
    }

    .table-head {
      min-height: 48px;
      background: var(--surface-soft);
      border-bottom: 1px solid var(--line);
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .doc-row {
      min-height: 72px;
      border-bottom: 1px solid var(--line);
      background: white;
      transition: 160ms ease;
    }

    .doc-row:hover {
      background: #fcfcff;
    }

    .doc-row.selected {
      background: #f7f7ff;
      box-shadow: inset 3px 0 0 var(--primary);
    }

    .doc-row.archived {
      background: #fbfcfd;
    }

    .doc-row:last-child {
      border-bottom: 0;
    }

    .doc-check-cell {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .doc-checkbox {
      width: 18px;
      height: 18px;
      cursor: pointer;
      accent-color: var(--primary);
    }

    .doc-title-wrap {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 11px;
    }

    .doc-copy {
      min-width: 0;
    }

    .doc-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.35;
    }

    .doc-meta {
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .cell-text {
      color: #475569;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.45;
    }

    /* Download button used inside .doc-row cells */
    .kb-btn-dl {
      padding: 4px 9px;
      font-size: 14px; line-height: 1;
      background: var(--accent-muted, rgba(99,102,241,.12));
      color: var(--accent, #6366f1);
      border: 1px solid var(--accent-border, rgba(99,102,241,.30));
      border-radius: 6px;
      flex-shrink: 0; /* prevents the button from collapsing in flex/grid rows */
      opacity: .80;
      transition: opacity .1s ease, background .1s ease;
    }
    .kb-btn-dl:hover { opacity: 1; background: rgba(99,102,241,.22); }

    .pagination-bar {
      min-height: 62px;
      padding: 12px 16px;
      border-top: 1px solid var(--line);
      background: var(--surface-soft);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .pagination-meta {
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
    }

    .pagination-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .page-btn,
    .page-indicator {
      min-height: 38px;
      padding: 0 12px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: white;
      color: #475569;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 800;
    }

    .page-btn:hover:not(:disabled) {
      color: var(--primary);
      border-color: var(--line-strong);
    }

    .page-btn:disabled {
      opacity: 0.46;
      cursor: not-allowed;
    }

    .page-indicator {
      color: var(--primary);
      background: var(--primary-soft);
      border-color: #d8dcff;
    }

    .empty-documents {
      padding: 38px 20px;
      text-align: center;
      color: var(--muted);
      background: white;
    }

    .empty-documents-title {
      color: var(--text);
      font-size: 16px;
      font-weight: 800;
    }

    .empty-documents-desc {
      margin: 8px auto 0;
      max-width: 440px;
      font-size: 13px;
      line-height: 1.58;
    }

    /* Шаблоны: без огромной презентационной шапки */

    .templates-layout {
      display: grid;
      gap: 16px;
      align-content: start;
    }

    .templates-toolbar {
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .templates-desc {
      max-width: 760px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
    }

    .template-board {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }

    .template-card {
      min-height: 204px;
      padding: 18px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.96);
      box-shadow: var(--shadow-soft);
      display: grid;
      align-content: space-between;
      gap: 16px;
      text-align: left;
      transition: 160ms ease;
    }

    .template-card:hover {
      transform: translateY(-1px);
      border-color: #cfd6ea;
      box-shadow: var(--shadow);
    }

    .template-name {
      margin-top: 16px;
      font-size: 17px;
      font-weight: 800;
      line-height: 1.35;
    }

    .template-desc {
      margin-top: 7px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.58;
    }

    .template-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    /* Уведомления и модалки */

    .drawer-backdrop,
    .drawer-backdrop.active {
      display: none;
    }

    .notification-drawer {
      position: fixed;
      top: 0;
      right: 0;
      z-index: 70;
      width: min(432px, 100vw);
      height: 100vh;
      transform: translateX(100%);
      transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
      background: rgba(255,255,255,0.99);
      border-left: 1px solid var(--line);
      box-shadow: -28px 0 80px rgba(15, 23, 42, 0.16);
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr);
    }

    .notification-drawer.active {
      transform: translateX(0);
    }

    .drawer-head {
      padding: 22px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
    }

    .drawer-title {
      font-size: 21px;
      font-weight: 800;
      line-height: 1.2;
    }

    .drawer-subtitle {
      margin-top: 5px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }

    .icon-btn {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      color: #64748b;
      border-radius: 12px;
      transition: 160ms ease;
    }

    .icon-btn:hover {
      color: var(--text);
      background: var(--surface-soft);
    }

    .drawer-tabs {
      padding: 13px 22px;
      border-bottom: 1px solid var(--line);
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .drawer-tab {
      min-height: 34px;
      padding: 0 12px;
      border-radius: 999px;
      background: var(--surface-soft);
      color: #475569;
      font-size: 12px;
      font-weight: 800;
    }

    .drawer-tab.active {
      color: var(--primary);
      background: var(--primary-soft);
    }

    .notifications-list {
      min-height: 0;
      overflow-y: auto;
      padding: 16px;
      display: grid;
      gap: 11px;
      align-content: start;
    }

    .notification-card {
      padding: 15px;
      border-radius: 17px;
      border: 1px solid var(--line);
      background: white;
      display: grid;
      gap: 11px;
      transition: 160ms ease;
    }

    .notification-card:hover {
      border-color: #cfd6ea;
      box-shadow: var(--shadow-soft);
    }

    .notification-top {
      display: flex;
      align-items: flex-start;
      gap: 11px;
    }

    .notification-mark {
      width: 36px;
      height: 36px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
    }

    .notification-mark.success {
      color: var(--green);
      background: var(--green-soft);
    }

    .notification-mark.warning {
      color: var(--amber);
      background: var(--amber-soft);
    }

    .notification-mark.error {
      color: var(--danger);
      background: var(--danger-soft);
    }

    .notification-title {
      font-size: 14px;
      font-weight: 800;
      line-height: 1.4;
    }

    .notification-task {
      margin-top: 3px;
      color: #334155;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.45;
    }

    .notification-desc {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
    }

    .notification-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .notification-link {
      color: var(--blue);
      font-size: 13px;
      font-weight: 800;
      text-decoration: none;
    }

    .notification-meta {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .modal {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: none;
      place-items: center;
      padding: 24px;
      background: rgba(15, 23, 42, 0.28);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .modal.active {
      display: grid;
    }

    .modal-card {
      width: min(650px, 100%);
      overflow: hidden;
      border-radius: 24px;
      border: 1px solid var(--line);
      background: white;
      box-shadow: 0 28px 84px rgba(15, 23, 42, 0.2);
    }

    .modal-head {
      min-height: 68px;
      padding: 18px 20px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }

    .modal-title {
      font-size: 19px;
      font-weight: 800;
      line-height: 1.3;
    }

    .modal-body {
      padding: 20px;
      display: grid;
      gap: 14px;
    }

    .duplicate-summary {
      padding: 15px;
      border-radius: 17px;
      border: 1px solid #fde68a;
      background: #fffbeb;
      display: grid;
      gap: 11px;
    }

    .duplicate-summary-title {
      color: #92400e;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.45;
    }

    .duplicate-card {
      padding: 13px;
      border-radius: 15px;
      border: 1px solid #f3e8b5;
      background: white;
      display: grid;
      gap: 5px;
    }

    .duplicate-doc-title {
      font-size: 14px;
      font-weight: 800;
      line-height: 1.4;
    }

    .duplicate-doc-meta,
    .muted-note {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
    }

    .modal-foot {
      padding: 0 20px 20px;
      display: flex;
      justify-content: flex-end;
      gap: 9px;
      flex-wrap: wrap;
    }

    .toast {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 12px 24px;
      border-radius: 8px;
      z-index: 10000;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, transform 0.3s ease;
      font-family: sans-serif;
      pointer-events: none;
    }

    .toast.active {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(-10px);
    }

    /* ── Toast notification: #toastMessage ───────────────────────────────── */
    /* Fixed at bottom-center; starts invisible and below final position.    */
    #toastMessage {
      position: fixed;
      bottom: 28px;
      left: 50%;
      /* Start centered horizontally, at rest (no upward shift yet) */
      transform: translateX(-50%) translateY(0);
      /* Above everything else in the UI */
      z-index: 99999;

      /* Initially invisible */
      opacity: 0;

      /* Smooth reveal: fade-in + slide-up */
      transition: opacity 0.28s ease, transform 0.28s ease;

      /* Dark pill styling */
      background-color: #1e2130;
      color: #ffffff;
      padding: 12px 22px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.45;
      letter-spacing: -0.01em;
      white-space: nowrap;
      max-width: min(480px, 90vw);

      /* Elevated shadow so it "pops" over the page */
      box-shadow:
        0 8px 32px rgba(15, 23, 42, 0.24),
        0 2px 8px  rgba(15, 23, 42, 0.14);

      /* Do NOT block clicks on underlying UI while invisible */
      pointer-events: none;
    }

    /* Visible state – triggered by JS adding this class */
    #toastMessage.toast-visible {
      opacity: 1;
      /* Shift slightly upward from the initial resting position */
      transform: translateX(-50%) translateY(-10px);
      /* Restore pointer-events so it can be interacted with if needed */
      pointer-events: auto;
    }

    .dashboard-page::-webkit-scrollbar,
    .history-page::-webkit-scrollbar,
    .knowledge-page::-webkit-scrollbar,
    .templates-page::-webkit-scrollbar,
    .chat-scroll::-webkit-scrollbar,
    .chat-context::-webkit-scrollbar,
    .notifications-list::-webkit-scrollbar {
      width: 7px;
      height: 7px;
    }

    .dashboard-page::-webkit-scrollbar-thumb,
    .history-page::-webkit-scrollbar-thumb,
    .knowledge-page::-webkit-scrollbar-thumb,
    .templates-page::-webkit-scrollbar-thumb,
    .chat-scroll::-webkit-scrollbar-thumb,
    .chat-context::-webkit-scrollbar-thumb,
    .notifications-list::-webkit-scrollbar-thumb {
      background: #cfd6e5;
      border-radius: 999px;
    }

    /* ============================================================
       STREAMING INDICATOR
       ============================================================ */

    /* Pulse keyframes: scales up slightly and fades to signal live activity */
    @keyframes pulse {
      0%   { transform: scale(1);   opacity: 1;    }
      50%  { transform: scale(1.2); opacity: 0.55; }
      100% { transform: scale(1);   opacity: 1;    }
    }

    /* Row of dots shown while the AI is streaming a response */
    .streaming-indicator {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 2px;
    }

    .streaming-dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--primary);
      animation: pulse 1.1s ease-in-out infinite;
      flex: 0 0 auto;
    }

    /* Stagger the three dots so they animate in sequence */
    .streaming-dot:nth-child(1) { animation-delay: 0ms;   }
    .streaming-dot:nth-child(2) { animation-delay: 180ms; }
    .streaming-dot:nth-child(3) { animation-delay: 360ms; }

    /* ============================================================
       PREPARING / TYPING ANIMATION
       Shown the moment the AI bubble is created, before any
       thinking_chunk or streaming_chunk events arrive. Removed
       on first real activity by app.js.
       ============================================================ */

    @keyframes typingBounce {
      0%, 60%, 100% { transform: translateY(0);    opacity: 0.45; }
      30%           { transform: translateY(-5px); opacity: 1;    }
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(2px); }
      to   { opacity: 1; transform: translateY(0);   }
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* Used for the small pulsing dot on the thinking summary
       (visible even when the thinking block is folded) and for
       the running-state dot inside tool status badges. */
    @keyframes gentlePulse {
      0%, 100% { transform: scale(0.85); opacity: 0.5; }
      50%      { transform: scale(1.15); opacity: 1;   }
    }

    /* Subtle left-edge pulse for tool boxes still in the running state */
    @keyframes runningBorderPulse {
      0%, 100% { opacity: 0.35; }
      50%      { opacity: 1;    }
    }

    .preparing-indicator {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 2px 4px;
      animation: fadeIn 240ms ease;
    }

    .prep-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--primary);
      animation: typingBounce 1.3s ease-in-out infinite;
      flex: 0 0 auto;
    }

    .prep-dot:nth-child(1) { animation-delay:   0ms; }
    .prep-dot:nth-child(2) { animation-delay: 180ms; }
    .prep-dot:nth-child(3) { animation-delay: 360ms; }

    .prep-label {
      margin-left: 6px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.01em;
    }

    /* Stream error message rendered inside the AI bubble when
       the SSE connection fails or the server emits an error event. */
    .stream-error-msg {
      margin-top: 8px;
      padding: 10px 12px;
      border-radius: 10px;
      background: var(--danger-soft);
      border: 1px solid #fca5a5;
      color: var(--danger);
      font-size: 13px;
      font-weight: 700;
    }

    /* ============================================================
       FOLDABLE TOOL & SUBINSTANCE BLOCKS
       Both use <details>/<summary> so they work without JS.
       ============================================================ */

    .tool-block,
    .subinstance-block {
      margin: 10px 0;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: var(--surface-soft);
      overflow: hidden;
    }

    /* The clickable header rendered as a <summary> element */
    .tool-block > summary,
    .subinstance-block > summary {
      list-style: none; /* remove the default disclosure triangle */
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 10px 14px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 800;
      color: #334155;
      user-select: none;
      transition: background 140ms ease;
    }

    /* Hide WebKit's default marker as well */
    .tool-block > summary::-webkit-details-marker,
    .subinstance-block > summary::-webkit-details-marker {
      display: none;
    }

    .tool-block > summary:hover,
    .subinstance-block > summary:hover {
      background: var(--surface-strong);
    }

    /* Chevron icon that rotates when the block is open */
    .tool-block > summary::before,
    .subinstance-block > summary::before {
      content: '';
      display: inline-block;
      width: 14px;
      height: 14px;
      flex: 0 0 auto;
      /* A simple right-pointing chevron drawn with borders */
      border-right: 2px solid var(--muted);
      border-bottom: 2px solid var(--muted);
      transform: rotate(-45deg);
      transition: transform 200ms ease;
      margin-right: 2px;
    }

    .tool-block[open] > summary::before,
    .subinstance-block[open] > summary::before {
      transform: rotate(45deg);
    }

    /* Expandable content area with a smooth height transition.
       Because CSS cannot animate height:auto, we use max-height. */
    .tool-block-body,
    .subinstance-block-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 240ms ease, padding 200ms ease;
      padding: 0 14px;
      border-top: 0 solid var(--line);
      font-size: 13px;
      line-height: 1.6;
      color: #334155;
    }

    /* When the <details> element is open, reveal the body */
    .tool-block[open] .tool-block-body,
    .subinstance-block[open] .subinstance-block-body {
      max-height: 1200px; /* large enough for any realistic content */
      padding: 12px 14px 14px;
      border-top: 1px solid var(--line);
    }

    /* ── Success state ────────────────────────────────────────── */
    .tool-block.tool-success {
      border-color: #a7f3d0; /* green tint */
      background: var(--green-soft);
    }

    .tool-block.tool-success > summary {
      color: var(--green);
    }

    .tool-block.tool-success > summary::before {
      border-color: var(--green);
    }

    .tool-block.tool-success > summary:hover {
      background: #d1fae5;
    }

    .tool-block.tool-success[open] .tool-block-body {
      border-top-color: #a7f3d0;
    }

    /* ── Error state ──────────────────────────────────────────── */
    .tool-block.tool-error {
      border-color: #fecaca; /* red tint */
      background: var(--danger-soft);
    }

    .tool-block.tool-error > summary {
      color: var(--danger);
    }

    .tool-block.tool-error > summary::before {
      border-color: var(--danger);
    }

    .tool-block.tool-error > summary:hover {
      background: #fee2e2;
    }

    .tool-block.tool-error[open] .tool-block-body {
      border-top-color: #fecaca;
    }

    /* Subinstance blocks use the primary accent colour to distinguish
       them from tool blocks at a glance */
    .subinstance-block {
      border-color: #d8dcff;
      background: var(--primary-soft);
    }

    .subinstance-block > summary {
      color: var(--primary);
    }

    .subinstance-block > summary::before {
      border-color: var(--primary);
    }

    .subinstance-block > summary:hover {
      background: #e6e9ff;
    }

    .subinstance-block[open] .subinstance-block-body {
      border-top-color: #d8dcff;
    }

    /* ============================================================
       MARKDOWN CONTENT STYLING  (scoped to .bubble.ai)
       ============================================================ */

    /* ── Paragraph spacing ────────────────────────────────────── */
    .bubble.ai p {
      margin: 0 0 0.85em;
    }

    .bubble.ai p:last-child {
      margin-bottom: 0;
    }

    /* ── Headings ─────────────────────────────────────────────── */
    .bubble.ai h1,
    .bubble.ai h2,
    .bubble.ai h3,
    .bubble.ai h4,
    .bubble.ai h5,
    .bubble.ai h6 {
      margin: 1.1em 0 0.45em;
      font-weight: 800;
      line-height: 1.3;
      color: var(--text);
    }

    .bubble.ai h1 { font-size: 1.35em; }
    .bubble.ai h2 { font-size: 1.2em;  }
    .bubble.ai h3 { font-size: 1.08em; }
    .bubble.ai h4,
    .bubble.ai h5,
    .bubble.ai h6 { font-size: 1em; }

    /* ── Typography: bold & italic ────────────────────────────── */
    .bubble.ai strong,
    .bubble.ai b {
      font-weight: 700;
      color: var(--text);
    }

    .bubble.ai em,
    .bubble.ai i {
      font-style: italic;
    }

    /* ── Lists ────────────────────────────────────────────────── */
    .bubble.ai ul,
    .bubble.ai ol {
      margin: 0.5em 0 0.85em;
      padding-left: 1.6em;
    }

    .bubble.ai ul {
      list-style: disc;
    }

    .bubble.ai ol {
      list-style: decimal;
    }

    .bubble.ai li {
      margin-bottom: 0.3em;
      line-height: 1.62;
    }

    /* Nested lists */
    .bubble.ai li > ul,
    .bubble.ai li > ol {
      margin-top: 0.25em;
      margin-bottom: 0.25em;
    }

    /* ── Horizontal rule ──────────────────────────────────────── */
    .bubble.ai hr {
      margin: 1.2em 0;
      border: none;
      border-top: 1px solid var(--line);
    }

    /* ── Block-level code (pre + code) ────────────────────────── */
    .bubble.ai pre {
      margin: 0.75em 0 1em;
      padding: 14px 16px;
      border-radius: var(--radius-sm);
      background: #1e1e1e;
      overflow-x: auto;
      /* Allow the scrollbar to appear without breaking layout */
      -webkit-overflow-scrolling: touch;
    }

    .bubble.ai pre::-webkit-scrollbar {
      height: 5px;
    }

    .bubble.ai pre::-webkit-scrollbar-thumb {
      background: #444;
      border-radius: 999px;
    }

    .bubble.ai pre code {
      /* Reset inline-code styles so block code looks clean */
      padding: 0;
      border-radius: 0;
      background: transparent;
      color: #d4d4d4;
      font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
      font-size: 13px;
      line-height: 1.65;
      white-space: pre;
    }

    /* ── Inline code ──────────────────────────────────────────── */
    .bubble.ai code {
      padding: 2px 6px;
      border-radius: 6px;
      background: #1e1e1e;
      color: #d4d4d4;
      font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
      font-size: 0.875em;
      /* Prevent inline code from wrapping mid-token */
      word-break: break-all;
    }

    /* ── Blockquote ───────────────────────────────────────────── */
    .bubble.ai blockquote {
      margin: 0.75em 0 1em;
      padding: 10px 14px;
      border-left: 3px solid var(--primary);
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      background: var(--primary-soft);
      color: #334155;
      font-size: 0.95em;
    }

    .bubble.ai blockquote p {
      margin: 0;
    }

    /* ── Tables ───────────────────────────────────────────────── */
    .bubble.ai table {
      width: 100%;
      border-collapse: collapse;
      margin: 0.75em 0 1em;
      font-size: 13.5px;
      line-height: 1.5;
      /* Allow horizontal scrolling on narrow viewports */
      display: block;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .bubble.ai table::-webkit-scrollbar {
      height: 5px;
    }

    .bubble.ai table::-webkit-scrollbar-thumb {
      background: #cfd6e5;
      border-radius: 999px;
    }

    .bubble.ai thead {
      background: var(--surface-strong);
    }

    .bubble.ai th {
      padding: 9px 13px;
      border: 1px solid var(--line);
      font-weight: 800;
      color: var(--text);
      text-align: left;
      white-space: nowrap;
    }

    .bubble.ai td {
      padding: 8px 13px;
      border: 1px solid var(--line);
      color: #334155;
      vertical-align: top;
    }

    /* Zebra-stripe table rows for readability */
    .bubble.ai tbody tr:nth-child(even) td {
      background: var(--surface-soft);
    }

    .bubble.ai tbody tr:hover td {
      background: var(--primary-soft);
    }

    /* ── Links inside AI bubbles ──────────────────────────────── */
    .bubble.ai a {
      color: var(--blue);
      text-decoration: underline;
      text-underline-offset: 2px;
      transition: color 140ms ease;
    }

    .bubble.ai a:hover {
      color: var(--primary);
    }

    /* ============================================================
       RESPONSIVE ADJUSTMENTS
       ============================================================ */

    @media (max-width: 1380px) {
      .table-head,
      .doc-row {
        grid-template-columns: 40px minmax(280px, 1.65fr) 120px 118px 124px 92px 94px;
        gap: 12px;
      }
    }

    @media (max-width: 1240px) {
      .app {
        grid-template-columns: 92px minmax(0, 1fr);
      }

      .brand-copy,
      .nav-copy,
      .nav-lock,
      .side-label,
      .recent-list,
      .profile-copy,
      .primary-action span,
      .kbd,
      .search-box input,
      .sidebar-search-results {
        display: none !important;
      }

      .sidebar {
        padding-left: 14px;
        padding-right: 14px;
      }

      .brand {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
      }

      .primary-action,
      .search-box,
      .nav-item,
      .profile-card {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
      }

      .dashboard-top-grid,
      .dashboard-bottom-grid,
      .chat-workspace.context-open {
        grid-template-columns: 1fr;
      }

      .chat-workspace.context-open .chat-context {
        display: none;
      }

      .template-board {
        grid-template-columns: repeat(2, 1fr);
      }

      .rail-title {
        max-width: min(560px, 42vw);
      }
    }

    @media (max-width: 1080px) {
      .table-head {
        display: none;
      }

      .doc-row {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 10px 12px;
        align-items: flex-start;
      }

      .doc-row > :nth-child(n+3) {
        grid-column: 2;
      }

      .cell-text::before {
        content: attr(data-label) ': ';
        color: #94a3b8;
        font-weight: 800;
      }

      .doc-meta {
        white-space: normal;
      }

      .knowledge-command-row {
        grid-template-columns: 1fr;
      }

      .knowledge-command-actions {
        justify-content: flex-start;
      }

      .rail-meta .optional-meta {
        display: none;
      }
    }

    @media (max-width: 900px) {
      .app {
        grid-template-columns: 1fr;
      }

      .sidebar {
        display: none;
      }

      .workspace {
        grid-template-rows: 56px minmax(0, 1fr);
      }

      .utility-rail {
        height: 56px;
        padding: 0 14px;
      }

      .rail-back-btn span,
      .rail-action-label {
        display: none !important;
      }

      .rail-action,
      .rail-action:hover,
      .rail-action:focus-visible,
      .rail-action.notifications-action:hover,
      .rail-action.notifications-action:focus-visible,
      .rail-action.new-action:hover,
      .rail-action.new-action:focus-visible,
      .rail-action.context-action:hover,
      .rail-action.context-action:focus-visible {
        width: 42px;
      }

      .rail-title {
        max-width: min(44vw, 280px);
      }

      .dashboard-page,
      .history-page,
      .knowledge-page,
      .templates-page {
        padding: 18px;
      }

      .dashboard-top-grid,
      .dashboard-bottom-grid,
      .quick-grid,
      .template-board {
        grid-template-columns: 1fr;
      }

      .knowledge-upload-strip,
      .templates-toolbar,
      .knowledge-filter-row,
      .selection-toolbar,
      .launcher-footer {
        align-items: flex-start;
        flex-direction: column;
      }

      .upload-actions,
      .selection-actions,
      .knowledge-command-actions {
        width: 100%;
        justify-content: flex-start;
      }

      .selection-actions .soft-btn,
      .selection-actions .ghost-btn,
      .selection-actions .danger-btn,
      .knowledge-command-actions .ghost-btn,
      .sort-select {
        width: 100%;
      }

      .active-chat-card {
        grid-template-columns: 1fr;
      }

      .active-chat-side {
        min-width: 0;
        justify-items: start;
      }

      .chat-scroll {
        padding: 22px 16px 16px;
      }

      .composer-shell {
        padding-left: 16px;
        padding-right: 16px;
      }

      .bubble,
      .bubble.user {
        max-width: 92%;
      }

      /* Tool / subinstance blocks: slightly tighter on small screens */
      .tool-block > summary,
      .subinstance-block > summary {
        padding: 9px 12px;
      }

      .tool-block[open] .tool-block-body,
      .subinstance-block[open] .subinstance-block-body {
        padding: 10px 12px 12px;
      }

      /* Tool call boxes: slightly tighter on small screens */
      .tool-call-box .tool-summary {
        padding: 9px 12px 9px 14px;
      }

      /* Markdown tables: reduce cell padding on narrow viewports */
      .bubble.ai th,
      .bubble.ai td {
        padding: 7px 10px;
      }
    }

    @media (max-width: 640px) {
      .rail-meta {
        display: none;
      }

      .rail-title {
        max-width: 46vw;
      }

      .composer-box {
        align-items: stretch;
        flex-direction: column;
      }

      .send-btn {
        width: 100%;
      }

      .history-row-summary {
        white-space: normal;
      }

      /* Code blocks: slightly smaller font on very small screens */
      .bubble.ai pre code {
        font-size: 12px;
      }
    }


    /* ============================================================
       TOOL CALL BOX — polished collapsible design
       Uses <details>/<summary> structure. Backend JSON tool events
       contain tool_call_id, tool_name, tool_input fields.
       Status states: idle (running) → complete OR errored.
       ============================================================ */

    .tool-call-box {
      position: relative;
      margin: 12px 0;
      border: 1px solid #d1d9e6;
      border-radius: 12px;
      background: linear-gradient(180deg, #fafbff, #f3f5fb);
      overflow: hidden;
      transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
    }

    .tool-call-box:hover {
      border-color: #b6c1d6;
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    }

    /* Pulsing left edge while a tool is still running.
       Hidden once .complete or .errored is added. */
    .tool-call-box:not(.complete):not(.errored)::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: linear-gradient(180deg, var(--primary), #8b5cf6);
      animation: runningBorderPulse 1.6s ease-in-out infinite;
      pointer-events: none;
    }

    .tool-call-box.complete {
      border-color: #bbf7d0;
      background: linear-gradient(180deg, #f0fdf4, #ecfdf5);
    }

    .tool-call-box.complete::before {
      display: none;
    }

    .tool-call-box.errored {
      border-color: #fca5a5;
      background: linear-gradient(180deg, #fef2f2, #fff1f2);
    }

    .tool-call-box.errored::before {
      display: none;
    }

    /* Summary (folded header) */
    .tool-summary {
      list-style: none;
      cursor: pointer;
      padding: 10px 14px 10px 16px;
      user-select: none;
      display: flex;
      align-items: center;
      gap: 9px;
      font-weight: 600;
      color: #334155;
      font-size: 13px;
      line-height: 1.4;
      transition: background 120ms ease;
    }

    .tool-summary:hover {
      background: rgba(99, 102, 241, 0.04);
    }

    .tool-summary::marker,
    .tool-summary::-webkit-details-marker {
      display: none;
    }

    /* Replace default disclosure marker with a rotating chevron drawn
       with borders, consistent with tool-block / subinstance-block. */
    .tool-summary::before {
      content: '';
      display: inline-block;
      width: 8px;
      height: 8px;
      flex: 0 0 auto;
      border-right: 2px solid #94a3b8;
      border-bottom: 2px solid #94a3b8;
      transform: rotate(-45deg);
      transition: transform 200ms ease;
      margin-right: 2px;
    }

    .tool-call-box[open] > .tool-summary::before {
      transform: rotate(45deg);
    }

    .tool-icon {
      font-size: 15px;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
    }

    /* Tool-summary-icon was the legacy class name; keep it as an alias
       so any historic markup still styles correctly. */
    .tool-summary-icon {
      font-size: 1.1em;
      flex-shrink: 0;
    }

    .tool-name {
      flex: 1;
      min-width: 0;
      color: #1e293b;
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Spawn-instance label (e.g. "Подзадача") sits between icon and title */
    .tool-spawn-label {
      padding: 2px 7px;
      border-radius: 6px;
      background: rgba(139, 92, 246, 0.12);
      color: #6d28d9;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.02em;
      flex-shrink: 0;
      margin-bottom: 0;
    }

    /* Right-aligned status badge in the summary.
       Uses ::after on .tool-status-text to render localised state copy. */
    .tool-status-badge {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
      font-size: 11px;
      font-weight: 700;
      color: var(--primary);
    }

    .tool-status-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--primary);
      animation: gentlePulse 1.3s ease-in-out infinite;
    }

    /* Default text shown in running state */
    .tool-status-text {
      font-size: 11px;
    }

    /* Complete state: switch dot + label. The text in HTML is
       "выполняется"; we hide the original via font-size:0 and inject
       the new label via ::after so we don't need to mutate the DOM. */
    .tool-call-box.complete .tool-status-badge {
      color: var(--green);
    }

    .tool-call-box.complete .tool-status-dot {
      background: var(--green);
      animation: none;
    }

    .tool-call-box.complete .tool-status-text {
      font-size: 0;
    }

    .tool-call-box.complete .tool-status-text::after {
      content: 'готово';
      font-size: 11px;
    }

    .tool-call-box.errored .tool-status-badge {
      color: var(--danger);
    }

    .tool-call-box.errored .tool-status-dot {
      background: var(--danger);
      animation: none;
    }

    .tool-call-box.errored .tool-status-text {
      font-size: 0;
    }

    .tool-call-box.errored .tool-status-text::after {
      content: 'ошибка';
      font-size: 11px;
    }

    /* Expanded content area */
    .tool-content {
      padding: 4px 16px 14px;
      border-top: 1px solid rgba(15, 23, 42, 0.05);
      font-size: 13px;
      line-height: 1.55;
      color: #334155;
    }

    /* User-facing description from tool synopsis */
    .tool-description {
      padding: 10px 0 4px;
      color: #475569;
      font-size: 13px;
      line-height: 1.55;
    }

    .tool-block-label {
      margin: 10px 0 4px;
      color: #64748b;
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .tool-input,
    .tool-result {
      margin: 0;
      padding: 10px 12px;
      border-radius: 8px;
      background: rgba(15, 23, 42, 0.04);
      color: #334155;
      font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
      font-size: 12.5px;
      line-height: 1.55;
      white-space: pre-wrap;
      word-break: break-word;
      /* Cap height so long tool results never dominate the chat;
         scroll inside the result block instead. */
      max-height: 320px;
      overflow-y: auto;
    }

    .tool-input {
      background: rgba(99, 102, 241, 0.05);
      color: #3730a3;
    }

    /* Pending state: holds the spinner + "Выполняется…" label
       inline. Removed by app.js when textContent is set. */
    .tool-result.pending {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      max-height: none;
      color: var(--primary);
      font-style: italic;
      background: rgba(99, 102, 241, 0.06);
    }

    .tool-call-box.complete .tool-result {
      background: rgba(34, 197, 94, 0.05);
      color: #14532d;
    }

    .tool-call-box.errored .tool-result {
      background: rgba(220, 38, 38, 0.06);
      color: #7f1d1d;
    }

    .tool-block-error-text {
      color: var(--danger);
    }

    /* Spinner used inside .tool-result.pending */
    .tool-spinner {
      display: inline-block;
      width: 14px;
      height: 14px;
      border: 2px solid rgba(99, 102, 241, 0.18);
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      flex-shrink: 0;
    }

    .tool-running-label {
      font-size: 12px;
      font-weight: 600;
    }

    /* Legacy class kept for backwards compatibility */
    .tool-running {
      color: #9ca3af;
      font-style: italic;
      padding: 8px 0;
    }

    /* Custom scrollbar inside long tool results */
    .tool-result::-webkit-scrollbar,
    .tool-input::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    .tool-result::-webkit-scrollbar-thumb,
    .tool-input::-webkit-scrollbar-thumb {
      background: rgba(99, 102, 241, 0.25);
      border-radius: 999px;
    }

    /* ── Spawn instance — distinct purple-tinted variant ──── */
    .tool-call-box.tool-spawn-instance {
      background: linear-gradient(180deg, #faf5ff, #f3e8ff);
      border-color: #d8b4fe;
    }

    .tool-call-box.tool-spawn-instance::before {
      background: linear-gradient(180deg, #8b5cf6, #6366f1);
    }

    .tool-call-box.tool-spawn-instance.complete {
      background: linear-gradient(180deg, #f5f3ff, #ede9fe);
      border-color: #c4b5fd;
    }

    .tool-call-box.tool-spawn-instance .tool-status-badge {
      color: #7c3aed;
    }

    .tool-call-box.tool-spawn-instance .tool-status-dot {
      background: #8b5cf6;
    }

    .tool-call-box.tool-spawn-instance.complete .tool-status-dot {
      background: var(--green);
      animation: none;
    }

    .tool-spawn-inner {
      margin-top: 10px;
      padding: 12px 14px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(139, 92, 246, 0.18);
    }

    /* ── Thinking block ──────────────────────────────────── */
    .thinking-block {
      background: linear-gradient(180deg, #fdf4ff, #fae8ff);
      border-color: #f0abfc;
    }

    /* Override the default running-edge gradient with a magenta one */
    .thinking-block::before {
      background: linear-gradient(180deg, #d946ef, #a855f7) !important;
    }

    .thinking-block .tool-name {
      color: #86198f;
    }

    /* Pulsing dot rendered next to the "Размышление" title in the
       summary so the user sees activity even when the block is folded. */
    .thinking-active-pulse {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: #d946ef;
      animation: gentlePulse 1.2s ease-in-out infinite;
      flex-shrink: 0;
      margin-left: 4px;
    }

    .thinking-active-label {
      font-size: 11px;
      color: #86198f;
      font-weight: 700;
      letter-spacing: 0.01em;
      flex-shrink: 0;
    }

    /* Hide active markers once thinking has stopped */
    .thinking-block:not(.active) .thinking-active-pulse,
    .thinking-block:not(.active) .thinking-active-label {
      display: none;
    }

    .thinking-body {
      padding: 10px 12px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.7);
      color: #6b21a8;
      font-family: 'JetBrains Mono', 'Fira Code', monospace;
      font-size: 12.5px;
      line-height: 1.55;
      white-space: pre-wrap;
      word-break: break-word;
      /* Cap thinking content height too — running thinking can be very
         long and would otherwise push response text far off-screen. */
      max-height: 280px;
      overflow-y: auto;
    }

/* ============================================================
   ADDITIONS for issues 1–5
   ============================================================ */

/* "Посмотреть все" footer button at the bottom of the sidebar
   recent-chats list. Routes to the dedicated History page. */
.recent-view-all-btn {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 13px;
  background: var(--surface-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  transition: 160ms ease;
  border: 1px solid transparent;
}

.recent-view-all-btn:hover {
  background: var(--primary-soft);
  border-color: #d8dcff;
}

/* Selected state for a sidebar recent-item — mirrors the .history-row
   selection treatment but tuned for the compact recent layout. */
.recent-item.selected {
  background: var(--primary-soft);
}

.recent-item.selected .recent-title {
  color: var(--primary);
}

/* Empty state shown on the dashboard "Активные чаты" card when no
   chats have had activity in the last ACTIVE_WINDOW_MS window. */
.active-chats-empty {
  padding: 26px 18px;
  border: 1px dashed var(--line);
  border-radius: 17px;
  background: var(--surface-soft);
  text-align: center;
}

.active-chats-empty-title {
  font-size: 14px;
  font-weight: 800;
  color: #475569;
}

.active-chats-empty-desc {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* Extra meta line under the active-chat-card desc, e.g. "3 сообщения". */
.active-chat-meta-line {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.chat-attached-files {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 10px;
}

.file-attach-chip {
        display: inline-flex;
        align-items: center;
        background: #f0f0f0;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 2px 8px;
        font-size: 12px;
        color: #333;
        gap: 6px;
}

.file-attach-chip--pending {
        border-style: dashed;
        border-color: #aaa;
        background: #fafafa;
}

.file-attach-chip-remove {
        background: transparent;
        border: none;
        cursor: pointer;
        font-size: 14px;
        color: #888;
        transition: color 0.2s;
}

.file-attach-chip-remove:hover {
        color: #ff4d4d;
}

/* ============================================================
   MODE SELECTOR ROW
   Lets the user pick the agent operating mode (e.g. "Быстрый" /
   "Вдумчивый") right above the composer. Buttons reuse the
   existing .tool-chip styling — this block only adds the row
   layout, the leading "Режим:" label, and the locked state.
   ============================================================ */

.mode-selector-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 2px;
  /* Disable abrupt visual jump when toggling .locked */
  transition: opacity 160ms ease;
}

/* Leading "Режим:" label rendered via a pseudo-element so no
   extra HTML is required. Mirrors the muted, bold style used
   by other small composer labels. */
.mode-selector-row::before {
  content: 'Режим:';
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin-right: 2px;
  flex: 0 0 auto;
}

/* .mode-chip is applied alongside .tool-chip so it inherits the
   full chip look (border-radius, padding, colors, hover/active
   transitions). The rule below is intentionally empty-equivalent
   — kept as an explicit hook so future mode-only tweaks have a
   place to live without touching .tool-chip. */
.mode-chip {
  /* Inherits .tool-chip styling — including .active state. */
}

/* Locked state — applied by JS via lockModeSelector(). Visually
   dims the row and blocks pointer interaction so the current
   mode cannot be changed mid-conversation. */
.mode-selector-row.locked {
  opacity: 0.4;
  pointer-events: none;
  /* Small lock indicator appended after the chips so the user
     understands the row is intentionally disabled. */
}

.mode-selector-row.locked::after {
  content: '🔒';
  margin-left: 4px;
  font-size: 12px;
  opacity: 0.7;
  flex: 0 0 auto;
}

/* ── Inverse variant ──────────────────────────────────────────
   Used on dark backgrounds (e.g. inside .chat-launcher on the
   dashboard). Overrides text/border colours for visibility on
   the gradient purple surface. */
.mode-selector-inverse::before {
  color: rgba(255, 255, 255, 0.7);
}

.mode-selector-inverse .tool-chip.mode-chip {
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
}

.mode-selector-inverse .tool-chip.mode-chip:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.mode-selector-inverse .tool-chip.mode-chip.active {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(99, 102, 241, 0.55);
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}

/* ============================================================
   WORKING INDICATOR
   Surfaced during gaps between SSE events while the agent is
   still working but the UI has no fresh chunks/events to render
   — e.g. between the last streaming_chunk and tool_start, or
   between tool_result and the next streaming_chunk / tool_start.
   Removed as soon as any new content-producing event arrives
   (or the stream finishes/errors).
   Reuses @keyframes typingBounce + fadeIn already defined for
   the preparing indicator.
   ============================================================ */

.working-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 2px 2px;
  margin-top: 4px;
  animation: fadeIn 220ms ease;
}

.working-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--primary);
  animation: typingBounce 1.3s ease-in-out infinite;
  flex: 0 0 auto;
  opacity: 0.85;
}

.working-dot:nth-child(1) { animation-delay:   0ms; }
.working-dot:nth-child(2) { animation-delay: 180ms; }
.working-dot:nth-child(3) { animation-delay: 360ms; }

.working-label {
  margin-left: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.01em;
}

/* ============================================================
   MESSAGE TIMESTAMP
   Small muted label rendered inside chat bubbles to indicate
   when each message was sent. Used by renderChatThread() and
   appendUserBubble(). Designed to be unobtrusive so it blends
   into both light AI bubbles and dark user bubbles.
   ============================================================ */

.message-timestamp {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted);
  opacity: 0.85;
  text-align: left;
  user-select: none;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* User bubbles have a dark background, so the muted gray timestamp
   wouldn't be readable. Switch to a translucent white tone and
   right-align it under the trailing edge of the bubble. */
.message-timestamp.user {
  text-align: right;
  color: rgba(255, 255, 255, 0.7);
  opacity: 0.9;
}

/* ============================================================
   CHAT ITEM DROPDOWN MENU
   Used for per-chat actions (rename, delete) shown via a small
   "⋮" button on each sidebar chat item. Parent element must have
   position: relative so the absolutely-positioned button and
   dropdown anchor correctly.
   ============================================================ */

.chat-item-menu-wrap {
    position: relative;
    display: inline-block;
}

.chat-item-menu-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 140ms ease, background 140ms ease, color 140ms ease;
}

/* Show the menu button when the parent chat item is hovered.
   Assumes the parent (e.g. .recent-item / .history-row) has
   position: relative set either via CSS or inline style. */
.recent-item:hover .chat-item-menu-btn,
.history-row:hover .chat-item-menu-btn,
*:hover > .chat-item-menu-btn {
  opacity: 1;
  visibility: visible;
}

/* Keep the button visible while its dropdown is open even if
   the pointer leaves the parent. */
.chat-item-menu-btn:hover,
.chat-item-menu-btn:focus-visible {
  opacity: 1;
  visibility: visible;
  background: var(--surface-soft);
  color: var(--text);
  outline: none;
}

.chat-item-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 6px;
  min-width: 120px;
  z-index: 1000;
  display: none;
  padding: 6px;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--line);
}

.chat-item-dropdown.open {
  display: block;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.dropdown-item:hover,
.dropdown-item:focus-visible {
  background: var(--primary-soft);
  color: var(--primary);
  outline: none;
}

.dropdown-item.danger {
  color: var(--danger);
}

.dropdown-item.danger:hover,
.dropdown-item.danger:focus-visible {
  background: var(--danger-soft);
  color: var(--danger);
}

/* ============================================================
   FIX: stable chat item "..." menu positioning
   ============================================================ */

/* Every chat row/card becomes the positioning context for the menu */
.recent-item,
.history-row,
.active-chat-card {
  position: relative;
  overflow: visible;
}

/* Reserve fixed space on the right so text never goes under the menu button */
.recent-item {
  padding-right: 46px;
}

.history-row {
  padding-right: 56px;
}

.active-chat-card {
  padding-right: 56px;
}

/* Sidebar title area must be allowed to shrink and ellipsize */
.recent-copy {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

/* Keep sidebar titles from pushing layout horizontally */
.recent-title,
.recent-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The wrapper is now absolutely positioned relative to the whole chat row */
.chat-item-menu-wrap {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: block;
  z-index: 30;
}

/* On larger history/dashboard cards, place the button near the top-right */
.history-row > .chat-item-menu-wrap,
.active-chat-card > .chat-item-menu-wrap {
  top: 12px;
  right: 12px;
  transform: none;
}

/* The button no longer positions itself absolutely.
   The wrapper owns the positioning. */
.chat-item-menu-btn {
  position: static;
  transform: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 140ms ease,
    visibility 140ms ease,
    background 140ms ease,
    color 140ms ease;
}

/* Show only when the actual row/card is hovered/focused */
.recent-item:hover > .chat-item-menu-wrap .chat-item-menu-btn,
.history-row:hover > .chat-item-menu-wrap .chat-item-menu-btn,
.active-chat-card:hover > .chat-item-menu-wrap .chat-item-menu-btn,
.recent-item:focus-within > .chat-item-menu-wrap .chat-item-menu-btn,
.history-row:focus-within > .chat-item-menu-wrap .chat-item-menu-btn,
.active-chat-card:focus-within > .chat-item-menu-wrap .chat-item-menu-btn,
.chat-item-menu-wrap:hover .chat-item-menu-btn,
.chat-item-menu-wrap:focus-within .chat-item-menu-btn,
.chat-item-menu-wrap:has(.chat-item-dropdown.open) .chat-item-menu-btn {
  opacity: 1;
  visibility: visible;
}

.chat-item-menu-btn:hover,
.chat-item-menu-btn:focus-visible {
  background: var(--surface-soft);
  color: var(--text);
  outline: none;
}

/* Dropdown is anchored to the stable wrapper, not to the title */
.chat-item-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 150px;
  z-index: 1000;
  display: none;
  padding: 6px;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--line);
}

.chat-item-dropdown.open {
  display: block;
}

/* Remove the old global hover behavior.
   The old selector "*:hover > .chat-item-menu-btn" is too broad. */
*:hover > .chat-item-menu-btn {
  opacity: unset;
  visibility: unset;
}

/* ============================================================
   FIX: clickable cursor + better sidebar recent-chat layout
   ============================================================ */

/* Div-based clickable rows should still feel clickable */
.recent-item[role="button"],
.history-row[role="button"],
.active-chat-card[role="button"] {
  cursor: pointer;
}

/* Keep real buttons explicitly clickable too */
.chat-item-menu-btn,
.dropdown-item {
  cursor: pointer;
}

/* Sidebar recent chats:
   Use a small grid so:
   - dot stays left
   - title uses row 1
   - "..." menu stays fixed on the right of row 1
   - meta line can use the full second line and does not get cut
*/
.recent-item {
  position: relative;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) 28px;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: start;

  /* Important: cancel the previous large right padding */
  padding: 9px 10px;
  padding-right: 10px;

  overflow: visible;
  cursor: pointer;
}

/* Dot spans both title + meta rows */
.recent-dot {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin-top: 5px;
}

/* Let title/meta become grid children */
.recent-copy {
  display: contents;
}

/* Title stays on first row and leaves room for the menu column */
.recent-title {
  grid-column: 2;
  grid-row: 1;

  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Meta uses the whole second line, including space under the menu column */
.recent-meta {
  grid-column: 2 / 4;
  grid-row: 2;

  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

/* In sidebar recent rows, menu participates in the row layout */
.recent-item > .chat-item-menu-wrap {
  grid-column: 3;
  grid-row: 1;

  position: relative;
  top: auto;
  right: auto;
  transform: none;

  width: 28px;
  height: 28px;
  justify-self: end;
  align-self: start;
  z-index: 30;
}

.recent-item > .chat-item-menu-wrap .chat-item-menu-btn {
  width: 28px;
  height: 28px;
}

/* Dropdown still opens from the fixed menu position */
.recent-item > .chat-item-menu-wrap .chat-item-dropdown {
  top: calc(100% + 6px);
  right: 0;
}

/* ============================================================
   MOBILE ADAPTATION LAYER
   Keeps the existing desktop layout intact, but turns the same
   sidebar/navigation into an off-canvas mobile menu below 900px.
   ============================================================ */

.mobile-menu-btn,
.mobile-nav-backdrop {
  display: none;
}

@supports (height: 100dvh) {
  .app,
  .workspace,
  .sidebar,
  .notification-drawer {
    height: 100dvh;
  }
}

@media (hover: none) {
  .primary-action:hover,
  .solid-btn:hover,
  .ghost-btn:hover,
  .soft-btn:hover,
  .danger-btn:hover,
  .quick-tile:hover,
  .active-chat-card:hover,
  .template-card:hover,
  .rail-action:hover,
  .chat-page-action:hover {
    transform: none;
  }
}

@media (max-width: 900px) {
  html,
  body {
    width: 100%;
    overscroll-behavior: none;
  }

  .app {
    height: 100vh;
    height: 100dvh;
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace {
    height: 100vh;
    height: 100dvh;
    min-width: 0;
    grid-template-rows: 58px minmax(0, 1fr);
  }

  .utility-rail {
    height: 58px;
    padding: 0 max(12px, env(safe-area-inset-left)) 0 max(12px, env(safe-area-inset-left));
    gap: 10px;
  }

  .rail-left {
    flex: 1 1 auto;
    min-width: 0;
    gap: 9px;
  }

  .rail-actions {
    flex: 0 0 auto;
    gap: 6px;
  }

  .mobile-menu-btn {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.92);
    color: #475569;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  }

  .mobile-menu-btn svg {
    width: 19px;
    height: 19px;
  }

  .mobile-menu-btn:hover,
  .mobile-menu-btn:focus-visible,
  body.mobile-sidebar-open .mobile-menu-btn {
    color: var(--primary);
    border-color: #d8dcff;
    background: var(--primary-soft);
    outline: none;
  }

  .rail-back-btn {
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    justify-content: center;
  }

  .rail-context {
    min-width: 0;
    flex: 1 1 auto;
  }

  .rail-title {
    max-width: none;
    width: 100%;
    font-size: 14px;
  }

  .rail-meta {
    display: flex;
    max-width: 100%;
    font-size: 10.5px;
  }

  .rail-meta .optional-meta {
    display: none !important;
  }

  .rail-action,
  .rail-action:hover,
  .rail-action:focus-visible,
  .rail-action.notifications-action:hover,
  .rail-action.notifications-action:focus-visible,
  .rail-action.new-action:hover,
  .rail-action.new-action:focus-visible,
  .rail-action.context-action:hover,
  .rail-action.context-action:focus-visible {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    transform: none;
  }

  .notification-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
  }

  .notifications-action {
    position: relative;
  }

  .sidebar {
    display: flex !important;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 120;
    width: min(86vw, 328px);
    max-width: 328px;
    height: 100vh;
    height: 100dvh;
    padding: calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
    transform: translateX(calc(-100% - 18px));
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 28px 0 80px rgba(15, 23, 42, 0.22);
    background: rgba(255, 255, 255, 0.98);
    border-right: 1px solid rgba(211, 219, 233, 0.95);
    overflow: hidden;
  }

  body.mobile-sidebar-open .sidebar {
    transform: translateX(0);
  }

  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: block;
    background: rgba(15, 23, 42, 0.36);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 180ms ease;
  }

  body.mobile-sidebar-open .mobile-nav-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  body.mobile-sidebar-open {
    overflow: hidden;
  }

  .brand {
    justify-content: flex-start;
    padding: 4px 4px 14px;
  }

  .brand-copy,
  .nav-copy,
  .nav-lock,
  .side-label,
  .recent-list,
  .profile-copy,
  .primary-action span,
  .search-box input {
    display: initial !important;
  }

  .brand-copy,
  .profile-copy {
    display: block !important;
  }

  .nav-copy {
    display: block !important;
  }

  .nav-lock {
    display: grid !important;
  }

  .side-label {
    display: block !important;
  }

  .recent-list {
    display: flex !important;
  }

  .primary-action span,
  .search-box input {
    display: inline !important;
  }

  .kbd {
    display: none !important;
  }

  .sidebar-search-results:not([hidden]) {
    display: grid !important;
  }

  .primary-action,
  .search-box,
  .nav-item,
  .profile-card {
    justify-content: flex-start;
    padding-left: 12px;
    padding-right: 12px;
  }

  .primary-action {
    justify-content: center;
  }

  .nav-list {
    gap: 6px;
  }

  .nav-item {
    min-height: 44px;
  }

  .sidebar-footer {
    margin-top: 14px;
  }

  .dashboard-page,
  .history-page,
  .knowledge-page,
  .templates-page {
    padding: 14px;
  }

  .dashboard-grid,
  .templates-layout {
    gap: 14px;
  }

  .dashboard-top-grid,
  .dashboard-bottom-grid,
  .quick-grid,
  .template-board,
  .template-board-inline {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .chat-launcher,
  .surface-card,
  .template-card,
  .template-card-inline {
    border-radius: 18px;
  }

  .chat-launcher {
    padding: 16px;
  }

  .launcher-title {
    font-size: 22px;
  }

  .launcher-desc {
    font-size: 13px;
  }

  .launcher-body {
    padding: 10px;
  }

  .launcher-textarea {
    min-height: 118px;
    font-size: 16px;
  }

  .launcher-footer,
  .templates-toolbar,
  .knowledge-upload-strip,
  .knowledge-filter-row,
  .selection-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .launcher-footer .solid-btn,
  .templates-toolbar .solid-btn,
  .knowledge-command-actions .ghost-btn,
  .selection-actions .soft-btn,
  .selection-actions .ghost-btn,
  .selection-actions .danger-btn,
  .sort-select {
    width: 100%;
  }

  .micro-actions,
  .chat-tool-row,
  .knowledge-filter-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .micro-actions::-webkit-scrollbar,
  .chat-tool-row::-webkit-scrollbar,
  .knowledge-filter-tabs::-webkit-scrollbar {
    display: none;
  }

  .micro-chip,
  .tool-chip,
  .knowledge-filter {
    flex: 0 0 auto;
  }

  .active-chat-card,
  .history-row {
    border-radius: 17px;
  }

  .active-chat-card {
    padding: 14px 48px 14px 14px;
  }

  .history-row {
    padding-right: 50px;
  }

  .chat-workspace {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .chat-main {
    min-height: 0;
  }

  .chat-page-action-bar {
    top: 10px;
    right: 12px;
    z-index: 8;
  }

  .chat-page-action {
    min-height: 36px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.96);
  }

  .chat-scroll {
    padding: 56px 12px 14px;
  }

  .thread {
    gap: 16px;
  }

  .bubble-row {
    gap: 9px;
  }

  .thread-avatar {
    width: 28px;
    height: 28px;
    border-radius: 10px;
  }

  .bubble,
  .bubble.user {
    max-width: min(100%, 92vw);
    font-size: 14.5px;
    line-height: 1.6;
  }

  .bubble.user {
    padding: 12px 14px;
    border-radius: 18px;
    border-top-right-radius: 8px;
  }

  .composer-shell {
    padding: 10px 12px max(12px, env(safe-area-inset-bottom));
  }

  .composer-inner {
    gap: 8px;
  }

  .composer-box {
    min-height: 56px;
    padding: 6px;
    border-radius: 20px;
    align-items: flex-end;
    flex-direction: row;
  }

  .chat-textarea {
    min-height: 44px;
    max-height: 132px;
    padding: 11px 9px;
    font-size: 16px;
  }

  .send-btn {
    width: 44px;
    height: 44px;
    border-radius: 16px;
  }

  .composer-note {
    font-size: 11px;
  }

  .empty-chat {
    padding: 14px;
  }

  .empty-chat-title {
    font-size: 22px;
  }

  .starter-prompts {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .starter-prompt {
    flex: 0 0 auto;
  }

  .chat-workspace.context-open .chat-context {
    display: grid;
    position: fixed;
    top: 58px;
    right: 0;
    bottom: 0;
    z-index: 90;
    width: min(92vw, 360px);
    height: auto;
    border-left: 1px solid var(--line);
    box-shadow: -22px 0 54px rgba(15, 23, 42, 0.16);
  }

  .templates-desc {
    max-width: none;
    font-size: 13px;
  }

  .template-card,
  .template-card-inline {
    min-height: 0;
    padding: 15px;
  }

  .template-card-inline .template-name,
  .template-name {
    font-size: 16px;
  }

  .template-prompt-box {
    max-height: 128px;
    font-size: 12.5px;
  }

  .template-card-upload-panel {
    max-width: 100%;
  }

  .notification-drawer {
    width: min(92vw, 420px);
  }

  .modal-card {
    width: min(94vw, 520px);
    max-height: calc(100vh - 28px);
    max-height: calc(100dvh - 28px);
  }

  #toastMessage {
    left: 12px;
    right: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    max-width: none;
    transform: translateY(12px);
    white-space: normal;
  }

  #toastMessage.toast-visible {
    transform: translateY(0);
  }
}

@media (max-width: 520px) {
  .dashboard-page,
  .history-page,
  .knowledge-page,
  .templates-page {
    padding: 12px;
  }

  .utility-rail {
    padding-left: 10px;
    padding-right: 10px;
  }

  .rail-meta {
    display: none;
  }

  .rail-title {
    font-size: 13.5px;
  }

  .rail-actions {
    gap: 4px;
  }

  .chat-launcher,
  .dashboard-side-card,
  .active-chats-card,
  .materials-card {
    padding: 14px;
  }

  .quick-tile {
    min-height: 86px;
    padding: 12px;
  }

  .active-chat-title,
  .history-row-title {
    font-size: 14px;
  }

  .material-row,
  .context-item,
  .notification-card {
    padding: 11px;
  }

  .template-card-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .template-open-chat-btn {
    width: 100%;
  }

  .composer-note {
    display: none;
  }
}


/* Lazy loading controls for chat history */
.history-load-more-row {
  padding: 14px 0 4px;
  display: grid;
  place-items: center;
  gap: 6px;
}

.history-load-more-btn {
  min-width: min(220px, 100%);
}

.history-load-more-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}


/* ============================================================
   MOBILE OVERFLOW / COMPACTNESS PATCH v3
   Fixes regressions after lazy-loading changes: no horizontal page
   scroll, compact dashboard cards, sane template cards, compact KB rows.
   ============================================================ */
@media (max-width: 900px) {
  html,
  body,
  .app,
  .workspace,
  .content,
  .view,
  .chat-workspace,
  .chat-main,
  .dashboard-page,
  .history-page,
  .knowledge-page,
  .templates-page {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .content,
  .view,
  .dashboard-grid,
  .dashboard-top-grid,
  .dashboard-bottom-grid,
  .templates-layout,
  .template-board,
  .template-board-inline,
  .knowledge-layout,
  .knowledge-controls-flat,
  .document-table,
  .chat-launcher,
  .launcher-body,
  .surface-card,
  .composer-inner,
  .composer-box,
  .thread,
  .bubble-row,
  .bubble,
  .bubble.user {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .dashboard-page,
  .history-page,
  .knowledge-page,
  .templates-page {
    padding: 12px;
  }

  .chat-launcher {
    padding: 14px;
    overflow: hidden;
  }

  .launcher-title {
    font-size: 21px;
  }

  .launcher-desc,
  .templates-desc,
  .template-desc,
  .upload-desc {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .launcher-body {
    padding: 10px;
    overflow: hidden;
  }

  .mode-selector-row,
  .launcher-footer,
  .micro-actions {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .mode-selector-row {
    flex-wrap: wrap;
  }

  .mode-selector-row::before {
    width: 100%;
    margin: 0 0 2px;
  }

  .launcher-textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 112px;
    max-height: min(34vh, 190px);
    max-height: min(34dvh, 190px);
    overflow-y: auto;
    box-sizing: border-box;
  }

  .launcher-footer {
    gap: 10px;
  }

  .micro-actions,
  .chat-tool-row,
  .knowledge-filter-tabs,
  .knowledge-summary-row {
    flex-wrap: wrap !important;
    overflow-x: hidden !important;
    overflow-y: visible;
  }

  .micro-chip,
  .tool-chip,
  .knowledge-filter,
  .knowledge-stat {
    max-width: 100%;
  }

  .launcher-footer .solid-btn,
  .template-open-chat-btn,
  .templates-toolbar .solid-btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .quick-tile,
  .active-chat-card,
  .material-row {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .tile-title,
  .tile-desc,
  .active-chat-title,
  .active-chat-desc,
  .material-title,
  .material-meta {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Knowledge base */
  .knowledge-upload-strip,
  .knowledge-command-row,
  .knowledge-search-shell,
  .knowledge-command-actions,
  .knowledge-filter-row,
  .selection-toolbar,
  .pagination-bar {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .knowledge-upload-strip {
    gap: 12px;
    padding: 12px;
    overflow: hidden;
  }

  .upload-main {
    width: 100%;
    min-width: 0;
    align-items: flex-start;
  }

  .upload-actions,
  .upload-pick {
    max-width: 100%;
  }

  .knowledge-search-input,
  .sort-select {
    min-width: 0;
    max-width: 100%;
  }

  .document-table {
    overflow: hidden !important;
  }

  .table-head {
    display: none !important;
  }

  .doc-row {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 8px 10px;
    padding: 14px 12px;
    align-items: flex-start;
    box-sizing: border-box;
  }

  .doc-row > * {
    min-width: 0;
  }

  .doc-row > :nth-child(n+3) {
    grid-column: 2;
  }

  .doc-check-cell {
    justify-content: flex-start;
    padding-top: 3px;
  }

  .doc-title-wrap {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 34px;
    gap: 9px;
    align-items: flex-start;
  }

  .doc-title-wrap .doc-icon {
    width: 38px;
    height: 38px;
  }

  .doc-copy {
    min-width: 0;
    max-width: 100%;
  }

  .doc-title,
  .doc-meta,
  .cell-text {
    white-space: normal !important;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .doc-dl-btn,
  .kb-btn-dl {
    width: 34px;
    min-width: 34px;
    height: 28px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    justify-self: end;
    box-sizing: border-box;
  }

  .pagination-actions {
    flex-wrap: wrap;
  }

  /* Templates */
  .template-board,
  .template-board-inline {
    overflow: hidden !important;
  }

  .template-card,
  .template-card-inline {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 0 !important;
    overflow: hidden;
    box-sizing: border-box;
  }

  .template-card-inline {
    grid-template-rows: auto auto auto auto auto !important;
    align-content: start;
  }

  .template-card-inline *,
  .template-card * {
    min-width: 0;
  }

  .template-card-inline .template-name,
  .template-name,
  .template-card-inline .template-desc,
  .template-desc,
  .template-footer-note,
  .template-hover-hint {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .template-card-inline .template-name,
  .template-name {
    font-size: 16px;
    line-height: 1.25;
  }

  .template-prompt-box {
    width: 100%;
    max-width: 100%;
    max-height: 128px;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    box-sizing: border-box;
  }

  .template-prompt-box.is-expanded {
    max-height: min(46vh, 320px);
    max-height: min(46dvh, 320px);
    overflow-y: auto;
  }

  .template-placeholder-hot {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .template-card-footer {
    width: 100%;
    min-width: 0;
  }

  .template-card-upload-panel {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* Chat */
  .chat-scroll {
    overflow-x: hidden !important;
  }

  .thread {
    margin-inline: 0;
  }

  .bubble,
  .bubble.user,
  .bubble.ai {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .bubble.ai pre,
  .bubble.ai code,
  .bubble.ai table {
    max-width: 100%;
  }

  .bubble.ai pre,
  .bubble.ai table {
    overflow-x: auto;
  }

  .composer-shell {
    overflow-x: hidden;
  }

  .composer-box {
    overflow: hidden;
  }

  .chat-textarea {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    max-height: min(33vh, 170px);
    max-height: min(33dvh, 170px);
    overflow-y: auto;
  }

  .composer-box.template-rich-active .template-rich-composer {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: calc(100% - 54px);
    max-height: min(33vh, 180px);
    max-height: min(33dvh, 180px);
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .composer-box.template-rich-active .send-btn {
    flex: 0 0 44px;
  }
}

@media (max-width: 390px) {
  .dashboard-page,
  .history-page,
  .knowledge-page,
  .templates-page {
    padding: 10px;
  }

  .chat-launcher,
  .dashboard-side-card,
  .active-chats-card,
  .materials-card,
  .template-card,
  .template-card-inline {
    border-radius: 16px;
    padding: 12px;
  }

  .launcher-body {
    padding: 9px;
  }

  .doc-row {
    padding: 12px 10px;
  }
}