:root {
        color-scheme: light;
        --bg: #f6f7f9;
        --panel: #ffffff;
        --panel-soft: #f0f3f6;
        --line: #d9dee5;
        --text: #17202a;
        --muted: #667381;
        --accent: #147a73;
        --accent-dark: #0f5d58;
        --user: #e8f3f1;
        --assistant: #ffffff;
        --danger: #b94a48;
        --shadow: 0 18px 60px rgba(23, 32, 42, 0.08);
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        height: 100%;
      }

      body {
        margin: 0;
        background: var(--bg);
        color: var(--text);
        font-family:
          Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
        letter-spacing: 0;
      }

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

      button {
        border: 0;
        cursor: pointer;
      }

      .app {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        min-height: 100%;
      }

      .sidebar {
        display: flex;
        flex-direction: column;
        gap: 18px;
        min-height: 100vh;
        padding: 18px 14px;
        border-right: 1px solid var(--line);
        background: #111820;
        color: #f7fafc;
      }

      .brand {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 2px 2px 0;
      }

      .brand-title {
        min-width: 0;
      }

      .brand-title strong {
        display: block;
        font-size: 17px;
        line-height: 1.25;
      }

      .brand-title span {
        display: block;
        margin-top: 3px;
        color: #aeb8c3;
        font-size: 12px;
      }

      .icon-button {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        flex: 0 0 auto;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.09);
        color: inherit;
      }

      .icon-button:hover {
        background: rgba(255, 255, 255, 0.16);
      }

      .side-section {
        display: grid;
        gap: 10px;
      }

      .side-label {
        color: #8f9cab;
        font-size: 12px;
      }

      .select {
        width: 100%;
        height: 40px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 0 10px;
        background: #1a232d;
        color: #f7fafc;
        outline: none;
      }

      .conversation-list {
        display: grid;
        gap: 8px;
        min-height: 0;
        overflow: auto;
      }

      .conversation-item {
        display: grid;
        gap: 3px;
        padding: 10px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.07);
        color: #f7fafc;
        text-align: left;
      }

      .conversation-item.active {
        background: rgba(20, 122, 115, 0.55);
      }

      .conversation-item span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
      }

      .conversation-item small {
        color: #aeb8c3;
        font-size: 12px;
      }

      .side-actions {
        display: grid;
        gap: 8px;
        margin-top: auto;
      }

      .side-link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.08);
        color: #e9eef3;
      }

      .side-link:hover {
        background: rgba(255, 255, 255, 0.14);
      }

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

      .topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 62px;
        padding: 0 22px;
        border-bottom: 1px solid var(--line);
        background: rgba(246, 247, 249, 0.92);
        backdrop-filter: blur(14px);
      }

      .topbar h1 {
        margin: 0;
        font-size: 17px;
        line-height: 1.25;
      }

      .topbar p {
        margin: 3px 0 0;
        color: var(--muted);
        font-size: 12px;
      }

      .mobile-menu {
        display: none;
        background: var(--panel-soft);
        color: var(--text);
      }

      .status {
        min-height: 28px;
        padding: 6px 10px;
        border-radius: 8px;
        background: var(--panel-soft);
        color: var(--muted);
        font-size: 12px;
      }

      .messages {
        min-height: 0;
        overflow-y: auto;
        padding: 30px 20px 24px;
      }

      .load-more {
        display: block;
        min-height: 36px;
        margin: 0 auto 22px;
        padding: 0 14px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--panel);
        color: var(--muted);
      }

      .load-more:hover {
        border-color: #9db7b4;
        color: var(--text);
      }

      .message-wrap {
        display: flex;
        gap: 12px;
        width: min(920px, 100%);
        margin: 0 auto 20px;
      }

      .message-wrap.user {
        flex-direction: row-reverse;
      }

      .avatar {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        flex: 0 0 auto;
        border-radius: 50%;
        background: #17202a;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
      }

      .message-wrap.user .avatar {
        background: var(--accent);
      }

      .bubble {
        min-width: 0;
        max-width: min(760px, calc(100vw - 140px));
        padding: 14px 16px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--assistant);
        box-shadow: 0 8px 30px rgba(23, 32, 42, 0.04);
        line-height: 1.72;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
      }

      .message-wrap.user .bubble {
        border-color: #c9dfdc;
        background: var(--user);
      }

      .bubble img {
        display: block;
        max-width: min(360px, 100%);
        max-height: 280px;
        margin-bottom: 10px;
        border-radius: 8px;
        object-fit: contain;
      }

      .bubble p {
        margin: 0 0 10px;
      }

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

      .bubble ul,
      .bubble ol {
        margin: 8px 0;
        padding-left: 22px;
      }

      .bubble strong {
        font-weight: 700;
      }

      .bubble code {
        padding: 2px 5px;
        border-radius: 5px;
        background: #eef1f4;
      }

      .bubble a {
        color: var(--accent-dark);
        text-decoration: underline;
        text-underline-offset: 2px;
      }

      .model-tag {
        margin-top: 10px;
        color: var(--muted);
        font-size: 12px;
      }

      .process {
        margin: 0 0 10px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #f7f9fb;
      }

      .process summary {
        cursor: pointer;
        padding: 8px 10px;
        color: var(--muted);
        font-size: 13px;
      }

      .process ol {
        margin: 0;
        padding: 0 14px 10px 30px;
        color: var(--muted);
        font-size: 13px;
      }

      .file-chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        max-width: 100%;
        margin-bottom: 10px;
        padding: 8px 10px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #f4f7f9;
        color: var(--text);
        font-size: 13px;
      }

      .composer-zone {
        padding: 14px 20px 22px;
        border-top: 1px solid var(--line);
        background: rgba(246, 247, 249, 0.92);
        backdrop-filter: blur(14px);
      }

      .composer {
        width: min(920px, 100%);
        margin: 0 auto;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--panel);
        box-shadow: var(--shadow);
      }

      .composer.dragover {
        border-color: var(--accent);
        outline: 3px solid rgba(20, 122, 115, 0.16);
      }

      .attachment {
        display: none;
        align-items: center;
        gap: 12px;
        padding: 12px 12px 0;
      }

      .attachment.visible {
        display: flex;
      }

      .attachment img {
        width: 72px;
        height: 72px;
        border: 1px solid var(--line);
        border-radius: 8px;
        object-fit: cover;
      }

      .attachment img.hidden {
        display: none;
      }

      .attachment div {
        min-width: 0;
        flex: 1;
        color: var(--muted);
        font-size: 13px;
      }

      .composer textarea {
        display: block;
        width: 100%;
        min-height: 56px;
        max-height: 180px;
        resize: none;
        border: 0;
        outline: none;
        padding: 14px 14px 8px;
        background: transparent;
        color: var(--text);
        line-height: 1.55;
      }

      .composer-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 10px 10px;
      }

      .left-tools,
      .right-tools {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .model-picker {
        width: 176px;
        height: 36px;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 0 10px;
        background: var(--panel-soft);
        color: var(--text);
        font-size: 13px;
        outline: none;
      }

      .mode-button.active {
        background: #dcefeb;
        color: var(--accent-dark);
      }

      .tool-button {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: var(--panel-soft);
        color: var(--text);
      }

      .tool-button:hover {
        background: #e3e8ee;
      }

      .send {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 8px;
        background: var(--accent);
        color: #fff;
      }

      .send.stop {
        background: #24313d;
      }

      .send:disabled {
        cursor: not-allowed;
        background: #b7c1c9;
      }

      .hint {
        color: var(--muted);
        font-size: 12px;
      }

      .typing {
        display: inline-flex;
        align-items: center;
        gap: 5px;
      }

      .typing i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--muted);
        animation: pulse 1.1s infinite ease-in-out;
      }

      .typing i:nth-child(2) {
        animation-delay: 0.15s;
      }

      .typing i:nth-child(3) {
        animation-delay: 0.3s;
      }

      .empty {
        width: min(720px, 100%);
        margin: 80px auto 0;
        color: var(--muted);
        text-align: center;
      }

      .empty h2 {
        margin: 0 0 10px;
        color: var(--text);
        font-size: 24px;
      }

      .prompts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 22px;
      }

      .prompt {
        min-height: 54px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--panel);
        color: var(--text);
        text-align: left;
      }

      .prompt:hover {
        border-color: #9db7b4;
      }

      input[type="file"] {
        display: none;
      }

      .hidden {
        display: none !important;
      }

      .conversation-section {
        min-height: 0;
      }

      .auth-card {
        display: grid;
        gap: 10px;
        padding: 11px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.07);
      }

      .auth-card strong,
      .auth-card span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .auth-card strong {
        font-size: 13px;
      }

      .auth-card span {
        margin-top: 3px;
        color: #aeb8c3;
        font-size: 12px;
      }

      .auth-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .auth-actions .side-link:first-child:last-child {
        grid-column: 1 / -1;
      }

      .modal {
        position: fixed;
        inset: 0;
        z-index: 50;
        display: grid;
        place-items: center;
        padding: 18px;
        background: rgba(12, 18, 25, 0.42);
      }

      .modal-panel {
        width: min(520px, 100%);
        max-height: min(820px, calc(100vh - 36px));
        overflow: auto;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--panel);
        box-shadow: var(--shadow);
      }

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

      .form-grid {
        display: grid;
        gap: 14px;
        padding: 18px;
      }

      .form-grid label {
        display: grid;
        gap: 7px;
        color: var(--muted);
        font-size: 13px;
      }

      .form-grid input {
        width: 100%;
        height: 40px;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 0 11px;
        background: var(--panel);
        color: var(--text);
        outline: none;
      }

      .form-actions,
      .telegram-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
      }

      .primary-button,
      .ghost-button {
        min-height: 38px;
        border-radius: 8px;
        padding: 0 13px;
      }

      .primary-button {
        background: var(--accent);
        color: #fff;
      }

      .primary-button:disabled,
      .ghost-button:disabled {
        cursor: not-allowed;
        opacity: 0.55;
      }

      .ghost-button {
        border: 1px solid var(--line);
        background: var(--panel-soft);
        color: var(--text);
      }

      .form-error,
      .admin-note {
        min-height: 18px;
        margin: 0;
        color: var(--danger);
        font-size: 13px;
      }

      .verify-copy {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.65;
      }

      .captcha-box {
        min-height: 70px;
        display: flex;
        align-items: center;
      }

      .admin-modal {
        width: min(1040px, 100%);
      }

      .admin-grid {
        display: grid;
        gap: 18px;
        padding: 18px;
      }

      .section-title {
        margin-bottom: 10px;
        color: var(--muted);
        font-size: 12px;
      }

      .metric-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
      }

      .metric {
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--panel-soft);
      }

      .metric strong {
        display: block;
        font-size: 22px;
        line-height: 1.2;
      }

      .metric span {
        display: block;
        margin-top: 4px;
        color: var(--muted);
        font-size: 12px;
      }

      .admin-list {
        display: grid;
        gap: 8px;
      }

      .admin-item {
        display: grid;
        gap: 4px;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
      }

      .admin-item span {
        color: var(--muted);
        font-size: 12px;
      }

      .select.light {
        width: min(420px, 100%);
        border-color: var(--line);
        background: var(--panel-soft);
        color: var(--text);
      }

      .analysis-output {
        margin-top: 10px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
        line-height: 1.72;
        white-space: pre-wrap;
      }

      @keyframes pulse {
        0%,
        80%,
        100% {
          opacity: 0.35;
          transform: translateY(0);
        }
        40% {
          opacity: 1;
          transform: translateY(-3px);
        }
      }

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

        .sidebar {
          position: fixed;
          inset: 0 auto 0 0;
          z-index: 20;
          width: min(82vw, 300px);
          transform: translateX(-105%);
          transition: transform 0.18s ease;
        }

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

        .main {
          height: 100vh;
        }

        .mobile-menu {
          display: grid;
        }

        .topbar {
          padding: 0 14px;
        }

        .messages {
          padding: 22px 12px 18px;
        }

        .message-wrap {
          gap: 8px;
          margin-bottom: 16px;
        }

        .avatar {
          width: 28px;
          height: 28px;
          font-size: 12px;
        }

        .bubble {
          max-width: calc(100vw - 70px);
          padding: 12px;
        }

        .composer-zone {
          padding: 10px 10px 14px;
        }

        .hint {
          display: none;
        }

        .composer-actions {
          align-items: flex-end;
        }

        .left-tools {
          min-width: 0;
          flex: 1;
        }

        .model-picker {
          width: min(46vw, 168px);
        }

        .prompts {
          grid-template-columns: 1fr;
        }

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

        .modal {
          align-items: end;
          padding: 0;
        }

        .modal-panel {
          width: 100%;
          max-height: 92vh;
          border-radius: 8px 8px 0 0;
        }
      }