/* ============================================================
   Shared base — used by every view (titlebar, resets, buttons)
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #040404;
  font-family: 'Inter', sans-serif;
  color: white;
  height: 100vh;
  overflow: hidden;
  -webkit-app-region: no-drag;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.hidden { display: none !important; }
.flex { display: flex; }
.flex-space-between { display: flex; align-items: center; justify-content: space-between; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-end { display: flex; justify-content: flex-end; }
.flex-gap-8 { display: flex; gap: 8px; }
.flex-1 { flex: 1; }
.min-width-0 { min-width: 0; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.w-100 { width: 100%; }
.text-white-60 { color: rgba(255,255,255,0.6); }
.text-white-80 { color: rgba(255,255,255,0.8); }

.form-error-banner {
  display: none;
  font-size: 12px;
  color: rgba(255,100,100,0.9);
  padding: 9px 12px;
  background: rgba(255,80,80,0.07);
  border: 1px solid rgba(255,80,80,0.15);
  border-radius: 7px;
  margin-bottom: 12px;
}

.sessions-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.refresh-sessions-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.25);
  cursor: pointer;
  font-size: 11px;
  padding: 0;
  line-height: 1;
  transition: color 0.15s;
}

.refresh-sessions-btn:hover {
  color: rgba(255,255,255,0.65);
}

.messages-header-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}


.agent-inline-notice {
  display: none;
  margin-bottom: 8px;
}

/* New Session: labels left of inputs (two-column grid), stacks on mobile */
.agent-form .new-session-top-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 6px 6px;
  align-items: center;
}

.new-session-label {
  font-size: 13px;
  color: rgba(255,255,255,0.72);
  text-align: left;
  padding-left: 2px;
}

.agent-form .new-session-top-row .modal-input-wrap,
.agent-form .new-session-top-row .agent-subject-wrap {
  width: 100%;
}

/* Make the top-row inputs visually match the instruction textarea (no background) */
.agent-form .new-session-top-row .modal-input {
  background: transparent;
  border: none;
  padding: 6px 8px;
  color: rgba(255,255,255,0.9);
  box-shadow: none;
}
.agent-form .new-session-top-row .modal-input::placeholder {
  color: rgba(255,255,255,0.45);
}

.agent-form .new-session-actions-row {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
  width: auto;
}

.agent-form .new-session-cancel-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
  padding: 8px 16px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  flex: 0 0 auto;
  min-width: 0;
  width: auto;
}

.agent-form .agent-create-btn {
  background: #ffffff;
  color: #0b0b0b;
  padding: 8px 16px;
  border-radius: 7px;
  border: 1px solid rgba(0,0,0,0.06);
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  flex: 0 0 auto;
  min-width: 0;
  width: auto;
}

.agent-form .agent-create-btn:hover,
.agent-form .agent-create-btn:focus {
  background: var(--brand-color, #2b6ef6);
  color: #fff;
  border-color: var(--brand-color, #2b6ef6);
}

@media (max-width: 640px) {
  .agent-form .new-session-actions-row {
    display: flex;
    justify-content: flex-end;
  }
  .agent-form .new-session-cancel-btn {
    display: none;
  }
  .agent-form .agent-create-btn {
    width: 100%;
    flex: 1 1 auto;
    margin-bottom: 12px;
  }
  .agent-form .new-session-top-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .new-session-label { text-align: left; padding-right: 0; }
}

.agent-chat-input-wrap {
  padding: 0 12px;
  border-radius: 12px;
  margin-left: 6px;
  margin-right: 6px;
  margin-bottom: 12px;
}

.agent-chat-input-wrap .chat-input-row {
  min-height: 44px;
}

.agent-chat-input-wrap .chat-textarea {
  padding: 10px 0;
}

.modal-input-wrap.mb-8 {
  margin-bottom: 8px;
}

.settings-verified-notice {
  display: none;
}

.settings-status-inline-mb {
  margin-bottom: 8px;
}

.a2a-hint-text {
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.52);
}

.a2a-hint-text strong {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
}

.a2a-section {
  gap: 6px;
}

.a2a-section .account-upgrade-actions {
  margin-top: 2px;
}

.settings-status-inline-mt {
  margin-top: 10px;
}

.settings-section-label-danger {
  color: rgba(255,100,100,0.6);
}

#settings-delete-reveal-btn,
#settings-delete-agent-btn {
  letter-spacing: 0.02em;
}

#settings-delete-confirm-wrap .settings-status-text {
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255,255,255,0.58);
}

#settings-delete-confirm-wrap .settings-status-text strong {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.settings-section-label.settings-section-label-danger {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(255,120,120,0.55);
}

.settings-delete-actions {
  display: flex;
  gap: 8px;
}

.settings-delete-actions .settings-secondary-btn,
.settings-delete-actions .settings-danger-btn {
  flex: 1;
  min-width: 0;
}

.settings-mnemonic-actions {
  display: none;
}

.settings-private-key-actions {
  display: none;
}

.settings-legal-input {
  margin-bottom: 8px;
}

.settings-delete-confirm-wrap {
  display: none;
}

.settings-delete-intro {
  display: none;
}

.chat-file-preview-icon {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  flex-shrink: 0;
}

.tx-spacer {
  flex: 1;
}

/* Titlebar */
.titlebar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 1000;
  -webkit-app-region: drag;
}

.titlebar-left {
  display: flex;
  align-items: center;
  gap: 6px;
  -webkit-app-region: no-drag;
  margin-left: 0;
}

.titlebar-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
}

.titlebar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  -webkit-app-region: no-drag;
}

.docs-link-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.2s;
  -webkit-app-region: no-drag;
  margin-right: 8px;
}

.docs-link-btn:hover { background: rgba(131, 131, 131, 0.1); }

.app-name {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.3px;
}

.app-divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.12);
}

.app-version {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
}

.titlebar-logo {
  width: 22px;
}

.window-control-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s;
  -webkit-app-region: no-drag;
}

.window-control-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

.sidebar-upgrade-btn {
  margin: 0 0 0;
  width: 100%;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
  border-radius: 0;
  background: #ffffff;
  color: #000000;
  font-size: 10px;
  line-height: 1;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  appearance: none;
  -webkit-appearance: none;
}

.sidebar-upgrade-btn:hover {
  background: rgba(255,255,255,0.92);
  color: #000000;
}

.sidebar-theme-toggle {
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 0 10px;
  height: 55px;
  cursor: pointer;
}

.sidebar-theme-toggle:hover {
  background: rgba(255,255,255,0.03);
}

.sidebar-theme-state {
  font-size: 10px;
  color: rgba(255,255,255,0.56);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body.light-theme {
  background: #f4f5f7;
  color: #111111;
}

body.light-theme .titlebar,
body.light-theme .agent-col,
body.light-theme .messages-header,
body.light-theme .chat-input-wrap,
body.light-theme .messages-body {
  background: #f7f7f8;
  color: #111111;
}

body.light-theme .titlebar {
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

body.light-theme .titlebar .app-name,
body.light-theme .titlebar .app-version,
body.light-theme .titlebar .docs-link-btn,
body.light-theme .titlebar .window-control-btn {
  color: #111111;
}

body.light-theme .titlebar .app-divider {
  background: rgba(0,0,0,0.12);
}

body.light-theme .titlebar .docs-link-btn:hover,
body.light-theme .titlebar .window-control-btn:hover {
  background: rgba(0,0,0,0.05);
  color: #111111;
}

body.light-theme .agent-col {
  border-color: rgba(0,0,0,0.08);
}

body.light-theme .sidebar-section-header:hover,
body.light-theme .sidebar-theme-toggle:hover {
  background: rgba(0,0,0,0.04);
}

body.light-theme .sidebar-section-label,
body.light-theme .sidebar-theme-state,
body.light-theme .sidebar-nav-subtle,
body.light-theme .messages-header-title,
body.light-theme .messages-header-session-id,
body.light-theme .chat-textarea,
body.light-theme .compose-popup-title,
body.light-theme .compose-field-label,
body.light-theme .msg-text,
body.light-theme .task-query,
body.light-theme .msg-meta,
body.light-theme .msg-system {
  color: #111111;
}

body.light-theme .sidebar-section-icon,
body.light-theme .sidebar-section-chevron,
body.light-theme .e2e-lock-icon,
body.light-theme .messages-header-action-btn i {
  color: rgba(0,0,0,0.7);
}

body.light-theme .sidebar-upgrade-btn {
  background: #ffffff;
  color: #111111;
  border: 1px solid rgba(0,0,0,0.08);
}

body.light-theme .sidebar-upgrade-btn:hover {
  background: #f4f5f7;
  color: #111111;
}

body.light-theme .sidebar-section-badge {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.12);
  color: rgba(0,0,0,0.7);
}

body.light-theme .chat-command-wrap,
body.light-theme .chat-input-row,
body.light-theme .compose-popup,
body.light-theme .agent-chat-input-wrap,
body.light-theme .agent-form,
body.light-theme .new-session-actions-row,
body.light-theme .modal-input,
body.light-theme .modal-tab,
body.light-theme .modal-tabs,
body.light-theme .agent-create-btn {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

body.light-theme .chat-textarea::placeholder {
  color: rgba(0,0,0,0.35);
}

body.light-theme .chat-send-btn,
body.light-theme .chat-attach-btn,
body.light-theme .chat-compose-btn,
body.light-theme .compose-send-btn,
body.light-theme .compose-back-btn {
  color: rgba(0,0,0,0.7);
  border-color: rgba(0,0,0,0.1);
}

body.light-theme .chat-send-btn:hover:not(:disabled),
body.light-theme .chat-attach-btn:hover,
body.light-theme .chat-compose-btn:hover,
body.light-theme .compose-send-btn:hover,
body.light-theme .compose-back-btn:hover {
  color: #111111;
  background: rgba(0,0,0,0.04);
}

body.light-theme .compose-popup-title,
body.light-theme .compose-field-label {
  color: rgba(0,0,0,0.65);
}

body.light-theme .compose-input {
  background: #f7f7f8;
  border-color: rgba(0,0,0,0.08);
  color: #111111;
}

body.light-theme .compose-input::placeholder {
  color: rgba(0,0,0,0.35);
}

/* ============================================================
   Auth view (Create / Connect)
   ============================================================ */

/* Main layout */
.main {
  position: fixed;
  top: 40px; left: 0; right: 0; bottom: 0;
  display: flex;
}

/* Left panel */
.left-panel {
  width: 50%;
  background: #0a0a0a;
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
  position: relative;
  overflow: hidden;
}

.left-panel-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 30%, rgba(255,255,255,0.04) 0%, transparent 70%);
  pointer-events: none;
}

.left-panel-tag {
  position: absolute;
  top: 32px;
  left: 40px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.left-panel-visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 20px;
}

.left-panel-visual img {
  width: 20%;
  max-width: 100px;
  opacity: 0.9;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5));
}

.left-panel-title {
  font-size: 26px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.5px;
  line-height: 1.25;
  margin-bottom: 10px;
}

.left-panel-title span {
  color: rgba(255,255,255,0.4);
  font-weight: 400;
}

/* Keep brand and title text bright on the left panel */
.left-panel-title .left-brand,
.left-panel-title .left-title {
  color: rgba(255,255,255,0.92);
}

.left-panel-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.3);
  line-height: 1.6;
  white-space: nowrap;
}

/* Right panel */
.right-panel {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #040404;
  position: relative;
  overflow: hidden;
}

.mobile-branding {
  display: none;
}

.mobile-branding-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.35));
}

.card {
  width: 100%;
  max-width: 520px;
  padding: 0 32px;
}

/* Section heading */
.view-title {
  font-size: 20px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: -0.3px;
  margin-bottom: 6px;
}

.view-subtitle {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 28px;
}

/* Mnemonic grid */
.mnemonic-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}

.mnemonic-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}

.word-input-wrapper { position: relative; }

.word-number {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 9px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.2);
  pointer-events: none;
  z-index: 1;
}

.word-input {
  width: 100%;
  padding: 22px 8px 8px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
  font-family: 'Inter', sans-serif;
  text-transform: lowercase;
}

.word-input::placeholder { color: rgba(255, 255, 255, 0.2); }

.word-input:focus {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
}

.word-input.valid { border-color: rgba(255, 255, 255, 0.15); }

.word-input.invalid {
  border-color: rgba(255, 80, 80, 0.5);
  animation: shake 0.25s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Connect method toggle link */
.connect-method-toggle {
  display: block;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  text-decoration: underline;
  cursor: pointer;
  margin-top: 14px;
  background: none;
  border: none;
  width: 100%;
  font-family: 'Inter', sans-serif;
  transition: color 0.15s;
}

.connect-method-toggle:hover { color: rgba(255, 255, 255, 0.6); }

/* Form fields */
.field {
  margin-bottom: 12px;
}

.field-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.field-row .field-input { margin-bottom: 0; flex: 1; }

.field-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}

.field-input::placeholder { color: rgba(255, 255, 255, 0.25); }

.field-input:focus {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
}

/* Password field with visibility toggle */
.password-field { position: relative; }

.password-field .field-input { padding-right: 42px; }

.password-toggle-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
}

.password-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}

/* Send code button */
.send-btn {
  padding: 0 16px;
  height: 42px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.send-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.9);
}

.send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Terms row */
.terms-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.terms-row input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: white;
  flex-shrink: 0;
}

.terms-row label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  line-height: 1.4;
}

.terms-row a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
}

/* Primary action button */
.action-btn {
  width: 100%;
  padding: 13px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s;
  letter-spacing: 0.2px;
}

.action-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.95);
}

.action-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Bottom legal links */
.legal-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.legal-links a {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.2);
  text-decoration: none;
  transition: color 0.15s;
}

.legal-links a:hover { color: rgba(255, 255, 255, 0.5); }

/* Tab switcher */
.tabs {
  display: flex;
  gap: 0;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tab-btn {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
  letter-spacing: 0.2px;
}

.tab-btn.active {
  color: rgba(255, 255, 255, 0.9);
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

.tab-btn:hover:not(.active) {
  color: rgba(255, 255, 255, 0.6);
}

/* View panels */
.view { display: none; }
.view.active { display: block; }

/* ============================================================
   Dashboard view (sessions / messaging / verification)
   ============================================================ */

/* Main layout */
.tx-container {
  position: fixed;
  top: 52px; left: 0; right: 0; bottom: 12px;
  display: flex;
  flex-direction: column;
  padding: 12px 20px;
  overflow: hidden;
}

/* Split panel */
.tx-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  background: #040404;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
}

/* Left: sessions list */
.sessions-col {
  width: 240px; flex-shrink: 0;
  display: flex; flex-direction: column;
  border-right: 1px solid rgba(255,255,255,0.07);
  overflow: hidden;
  transition: width 0.2s ease;
}
.sessions-col.collapsed { width: 0; border-right: none; }
.sessions-col.collapsed .sessions-list,
.sessions-col.collapsed .sessions-col-header { display: none; }

.sessions-col-header {
  padding: 10px 14px 8px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.25); text-transform: uppercase;
  flex-shrink: 0;
}


.sessions-list {
  flex: 1; overflow-y: auto;
  scrollbar-width: none;
}
.sessions-list::-webkit-scrollbar { display: none; }

.sessions-list-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sessions-toggle-row {
  display: flex;
  gap: 8px;
  padding: 10px 10px 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.03));
}

.sessions-toggle-btn {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: rgba(255,255,255,0.55);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.sessions-toggle-btn:hover {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.05);
}

.sessions-toggle-btn:active {
  background: rgba(255,255,255,0.08);
}

.sessions-toggle-btn.active {
  background: rgba(255,255,255,0.95);
  color: #000;
  border-color: rgba(255,255,255,0.95);
}

.sessions-new-btn {
  width: 36px;
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.sessions-new-btn:hover {
  color: rgba(255,255,255,0.95);
  background: rgba(255,255,255,0.07);
}

.sessions-new-btn:active {
  background: rgba(255,255,255,0.1);
}

.sessions-empty {
  height: 100%; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 8px;
  color: rgba(255,255,255,0.2); font-size: 12px;
}
.sessions-empty i { font-size: 20px; opacity: 0.4; }

.sessions-load-more-row {
  display: flex;
  justify-content: center;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.sessions-load-more-btn {
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.72);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sessions-load-more-btn:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
}

.sessions-load-more-btn:disabled {
  cursor: default;
  opacity: 0.65;
}

.session-item {
  display: block;
  padding: 9px 14px; cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.session-item-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.session-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.session-meta-toggle {
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.28);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.15s ease;
}

.session-meta-toggle:hover {
  color: rgba(255,255,255,0.65);
}

.session-item.expanded .session-meta-toggle {
  color: rgba(255,255,255,0.92);
}

.session-item:last-child { border-bottom: none; }
.session-item:hover { background: rgba(255,255,255,0.03); }
.session-item.active {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
}
.session-item.active .session-partner { color: rgba(255,255,255,0.92); }

.session-info { flex: 1; min-width: 0; }
.session-time {
  font-size: 10px; color: rgba(255,255,255,0.3);
  margin-bottom: 2px;
}
.session-item.active .session-time { color: rgba(255,255,255,0.42); }
.session-unread-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.8); flex-shrink: 0;
  display: none;
}
.session-item.unread .session-unread-dot { display: block; }
.session-partner {
  font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.session-subject {
  font-size: 10px;
  color: rgba(255,255,255,0.42);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.session-item.active .session-subject { color: rgba(255,255,255,0.5); }

.session-item.active .session-meta-toggle {
  color: rgba(255,255,255,0.42);
}

.session-item.active .session-meta-toggle:hover,
.session-item.active.expanded .session-meta-toggle {
  color: rgba(255,255,255,0.78);
}

.session-item.expanded {
  padding-bottom: 11px;
}

.session-item-meta {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.session-item-meta-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.session-item-meta-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}

.session-item-meta-value {
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255,255,255,0.72);
  white-space: pre-wrap;
  word-break: break-word;
}

.session-item-meta-empty {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  gap: 6px;
}

.session-item.active .session-item-meta {
  border-top-color: rgba(255,255,255,0.12);
}

.session-item.active .session-item-meta-label {
  color: rgba(255,255,255,0.42);
}

.session-item.active .session-item-meta-value,
.session-item.active .session-item-meta-empty {
  color: rgba(255,255,255,0.82);
}

.sessions-list-topbar {
  flex-shrink: 0;
  display: none;
  align-items: center;
  justify-content: stretch;
  padding: 8px 10px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.sessions-search-wrap {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sessions-search-icon {
  font-size: 10px; color: rgba(255,255,255,0.2); flex-shrink: 0;
}
.sessions-search-input {
  flex: 1; background: none; border: none; outline: none;
  font-size: 11px; font-family: 'Inter', sans-serif;
  color: rgba(255,255,255,0.7);
}
.sessions-search-input::placeholder { color: rgba(255,255,255,0.18); }

.sessions-search-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.sessions-new-inline-btn {
  height: 32px;
  width: 100%;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #ffffff;
  color: #000000;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.sessions-new-inline-btn:hover {
  color: #000000;
  background: #f5f5f5;
  border-color: rgba(0,0,0,0.12);
}

.sessions-filter-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.sessions-filter-btn:hover {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.07);
}

.sessions-filter-btn.active {
  color: rgba(0,0,0,0.82);
  background: rgba(255,255,255,0.95);
  border-color: rgba(255,255,255,0.95);
}

/* Center: messages */
.messages-col {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
  --sessions-list-pane-width: max(min(320px, 34%), 220px);
}

/* Floating chat input */
.chat-input-wrap {
  position: absolute;
  left: 50%; bottom: 16px;
  transform: translateX(-50%);
  width: min(520px, calc(100% - 32px));
  pointer-events: none;
  z-index: 10;
  display: none;
}

.chat-command-wrap {
  background: #0e0e0e;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  display: flex; flex-direction: column;
  padding: 0 14px;
  pointer-events: all;
  transition: border-color 0.2s, background 0.2s;
}
.chat-command-wrap:focus-within {
  border-color: rgba(255,255,255,0.22);
  background: #111;
}

.agent-chat-input-wrap {
  padding: 0 16px;
  border-radius: 12px;
  margin: 0 16px 12px;
  width: calc(100% - 32px);
}

.agent-chat-input-wrap .chat-textarea {
  padding: 10px 0;
}

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

.chat-textarea {
  flex: 1;
  background: transparent; border: none; outline: none;
  color: rgba(255,255,255,0.9);
  font-size: 13px; font-family: 'Inter', sans-serif;
  resize: none; padding: 13px 0;
  max-height: 120px; line-height: 1.5;
  scrollbar-width: none;
}
.chat-textarea::-webkit-scrollbar { display: none; }
.chat-textarea::placeholder { color: rgba(255,255,255,0.2); }

.chat-send-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.35);
  cursor: pointer; font-size: 14px;
  padding: 5px 9px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: color 0.15s, border-color 0.15s;
}
.chat-send-btn:hover:not(:disabled) { color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.35); }
.chat-send-btn:disabled { opacity: 0.25; cursor: not-allowed; }

.chat-attach-btn {
  background: none; border: none;
  color: rgba(255,255,255,0.25);
  cursor: pointer; font-size: 14px;
  padding: 5px 7px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: color 0.15s;
}
.chat-attach-btn:hover { color: rgba(255,255,255,0.65); }
.chat-attach-btn:disabled { opacity: 0.25; cursor: not-allowed; }

/* Element composer */
.chat-compose-btn {
  background: none; border: none;
  color: rgba(255,255,255,0.25);
  cursor: pointer; font-size: 14px;
  padding: 5px 7px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: color 0.15s;
}
.chat-compose-btn:hover { color: rgba(255,255,255,0.65); }
.chat-compose-btn:disabled { opacity: 0.25; cursor: not-allowed; }
.chat-compose-btn.active { color: rgba(255,255,255,0.8); }

.compose-popup {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: #111;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 10px;
  width: 220px;
  display: none;
  flex-direction: column;
  gap: 6px;
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  pointer-events: all;
}
.compose-popup.open { display: flex; }
.compose-popup-title {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.25); text-transform: uppercase;
  padding: 0 2px 4px;
}
.compose-type-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.compose-type-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 7px; padding: 8px 6px;
  color: rgba(255,255,255,0.6); font-size: 11px;
  font-family: 'Inter', sans-serif;
  cursor: pointer; text-align: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.compose-type-btn i { font-size: 14px; color: rgba(255,255,255,0.3); }
.compose-type-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.9); }
.compose-type-btn:hover i { color: rgba(255,255,255,0.7); }
.compose-type-btn.selected { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.95); }
.compose-type-btn.selected i { color: rgba(255,255,255,0.8); }

.compose-form {
  display: none; flex-direction: column; gap: 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 8px; margin-top: 2px;
}
.compose-form.open { display: flex; }
.compose-field-label {
  font-size: 10px; color: rgba(255,255,255,0.3);
  font-weight: 500; letter-spacing: 0.04em; margin-bottom: 2px;
}
.compose-input {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 6px; padding: 7px 9px;
  color: rgba(255,255,255,0.85); font-size: 12px;
  font-family: 'Inter', sans-serif; width: 100%; outline: none;
  transition: border-color 0.15s;
}
.compose-input:focus { border-color: rgba(255,255,255,0.22); }
.compose-input::placeholder { color: rgba(255,255,255,0.18); }
.compose-send-btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px; padding: 7px 10px;
  color: rgba(255,255,255,0.8); font-size: 12px;
  font-family: 'Inter', sans-serif;
  cursor: pointer; transition: background 0.15s;
  margin-top: 2px;
}
.compose-send-btn:hover { background: rgba(255,255,255,0.12); }
.compose-back-btn {
  background: none; border: none;
  color: rgba(255,255,255,0.25); font-size: 11px;
  font-family: 'Inter', sans-serif;
  cursor: pointer; text-align: left; padding: 0;
  display: flex; align-items: center; gap: 4px;
  transition: color 0.15s;
}
.compose-back-btn:hover { color: rgba(255,255,255,0.6); }

.chat-file-preview {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 0;
}
.chat-file-preview-name {
  font-size: 11px; color: rgba(255,255,255,0.6);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-file-preview-remove {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.25); font-size: 11px; padding: 0;
  transition: color 0.15s; flex-shrink: 0;
}
.chat-file-preview-remove:hover { color: rgba(255,255,255,0.6); }

/* Left navigation sidebar */
.agent-col {
  width: 255px;
  min-width: 255px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,0.07);
  overflow: hidden;
  transition: width 0.2s ease;
  background: rgba(255,255,255,0.02);
}

.agent-col .sessions-col {
  width: 100%;
  border-right: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.agent-col .sessions-col .sessions-list-wrap {
  min-height: 0;
}

.agent-col .sidebar-section {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.agent-col .sidebar-section:last-child {
  border-bottom: none;
}

.desktop-only {
  display: none;
}

@media (min-width: 769px) {
  .desktop-only {
    display: flex;
  }

  .agent-col.wide {
    width: 40vw;
    max-width: 650px;
  }
}


/* Collapsible sidebar sections — exclusive accordion */
.sidebar-section {
  flex-shrink: 0;
  display: flex; flex-direction: column;
}
.sidebar-section.open {
  flex: 1; min-height: 0;
}

#cloud-agent-section.open {
  flex: 0 0 auto;
}
.sidebar-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px;
  height: 55px;
  cursor: pointer; user-select: none;
  flex-shrink: 0;
  transition: background 0.15s;
}
.sidebar-section-header:hover { background: rgba(255,255,255,0.03); }
.sidebar-section-header.active {
  background: rgba(255,255,255,0.03);
  border-radius: 0;
}
.sidebar-section-header.active .sidebar-section-label {
  color: #ffffff;
}
.sidebar-section-header.active .sidebar-section-chevron {
  color: rgba(255,255,255,0.8);
}

body.light-theme .sidebar-section-header.active {
  background: rgba(0,0,0,0.05);
}

body.light-theme .sidebar-section-header.active .sidebar-section-label,
body.light-theme .sidebar-section-header.active .sidebar-section-icon,
body.light-theme .sidebar-section-header.active .sidebar-section-chevron,
body.light-theme .sidebar-nav-item .sidebar-section-chevron {
  color: #111111;
}

body.light-theme .sidebar-section-header.active .sidebar-section-chevron {
  color: rgba(0,0,0,0.7);
}
.sidebar-footer {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 0;
}
.sidebar-footer .sidebar-section {
  border-bottom: none;
}
.sidebar-footer .sidebar-section-header {
  padding: 0 14px;
}
.sidebar-nav-item {
  justify-content: space-between;
}
.sidebar-nav-item .sidebar-section-chevron {
  color: rgba(255,255,255,0.28);
}
.sidebar-section-title {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}
.sidebar-section-icon {
  font-size: 14px;
  color: rgba(255,255,255,0.72);
  flex-shrink: 0;
  width: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sidebar-section-header.active .sidebar-section-icon {
  color: rgba(255,255,255,0.95);
}
.sidebar-nav-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.sidebar-nav-title {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}
.sidebar-nav-subtle {
  font-size: 10px;
  line-height: 1.3;
  color: rgba(255,255,255,0.62);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-section-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  color: #ffffff; text-transform: uppercase;
}
.sidebar-section-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.82);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
}
.sidebar-section-chevron {
  font-size: 9px; color: rgba(255,255,255,0.2);
  transition: transform 0.2s;
}
.sidebar-section.open .sidebar-section-chevron { transform: none; }
.sidebar-section-body {
  display: none; flex: 1; min-height: 0;
  flex-direction: column; overflow: hidden;
}
.sidebar-section.open .sidebar-section-body {
  display: flex;
}

#cloud-agent-section .sidebar-section-body {
  flex: 0 0 auto;
}

.sidebar-submenu-item {
  width: 100%;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.66);
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 12px 14px 12px 41px;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.sidebar-submenu-item i {
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
}

.sidebar-submenu-item:hover {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.03);
}

.sidebar-submenu-item.active {
  color: #ffffff;
  background: rgba(255,255,255,0.05);
}

body.light-theme .sidebar-submenu-item {
  color: rgba(0,0,0,0.6);
}

body.light-theme .sidebar-submenu-item:hover {
  color: #111111;
  background: rgba(0,0,0,0.04);
}

body.light-theme .sidebar-submenu-item.active {
  color: #111111;
  background: rgba(0,0,0,0.06);
}
/* Session info fields */
#session-info-section .sidebar-section-body {
  overflow-y: auto; scrollbar-width: none;
}
#session-info-section .sidebar-section-body::-webkit-scrollbar { display: none; }
.session-info-fields {
  padding: 0 14px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.session-info-field {
  display: flex; flex-direction: column; gap: 3px;
}
.session-info-field-label {
  font-size: 9px; font-weight: 600; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.2); text-transform: uppercase;
}
.session-info-field-value {
  font-size: 11px; color: rgba(255,255,255,0.55);
  line-height: 1.4; word-break: break-word;
}
.session-info-empty {
  font-size: 11px; color: rgba(255,255,255,0.18);
  padding: 0 14px 12px; font-style: italic;
}

/* MCP Server section */
.mcp-body {
  padding: 10px 14px 14px;
  display: flex; flex-direction: column; gap: 10px;
  border-radius: 0;
}
.mcp-install-notice {
  display: flex; flex-direction: column; gap: 10px;
}
.mcp-setup-step {
  display: flex; flex-direction: column; gap: 5px;
}
.mcp-install-text {
  font-size: 10px; color: rgba(255,255,255,0.3); line-height: 1.4;
  display: flex; align-items: center; gap: 5px;
}
.mcp-step-num {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.08);
  font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
}
.mcp-install-cmd-row {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px; padding: 5px 8px;
}
.mcp-install-cmd {
  flex: 1; font-size: 11px; font-family: monospace;
  color: rgba(255,255,255,0.6);
  word-break: break-all;
  min-width: 0;
}
.mcp-copy-btn {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.25); font-size: 11px; padding: 0;
  transition: color 0.15s; flex-shrink: 0;
}
.mcp-copy-btn:hover { color: rgba(255,255,255,0.7); }

.cloud-agent-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 10px;
  padding: 10px 8px 8px;
  border-radius: 0;
  margin: 0;
  overflow: visible;
  scrollbar-width: none;
  min-width: 0;
}

.cloud-agent-body::-webkit-scrollbar {
  display: none;
}

.cloud-agent-body .agent-subject-wrap {
  flex: 0 0 auto;
  min-height: 200px;
}

.cloud-agent-body .agent-instruct-area {
  width: 100%;
  min-height: 160px;
  height: 160px;
  min-width: 220px;
  box-sizing: border-box;
}

.cloud-agent-notice {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,0.45);
  margin: 8px 0 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.cloud-agent-notice i {
  color: rgba(255,255,255,0.3);
  flex-shrink: 0;
}

.cloud-agent-status-row {
  justify-content: space-between;
}

.cloud-agent-actions {
  margin-top: 10px;
  margin-bottom: 0;
  padding-bottom: 12px;
}

.cloud-agent-upload-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cloud-agent-upload-hint {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,0.45);
}

.cloud-agent-upload-types {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cloud-agent-upload-type {
  font-size: 10px;
  line-height: 1.4;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 5px;
  padding: 6px 8px;
}

.cloud-agent-upload-type strong {
  color: rgba(255,255,255,0.75);
  font-weight: 600;
}

.cloud-agent-upload-file-name {
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255,255,255,0.32);
  word-break: break-word;
}

.cloud-agent-upload-file-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cloud-agent-policy-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 12px;
}

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

@media (max-width: 640px) {
  .cloud-agent-policy-grid {
    grid-template-columns: 1fr;
  }
}

.cloud-agent-policy-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  cursor: pointer;
}

.cloud-agent-policy-item:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.14);
}

.cloud-agent-policy-checkbox {
  margin-top: 2px;
  accent-color: rgba(255,255,255,0.9);
  flex-shrink: 0;
}

.cloud-agent-policy-item strong {
  display: block;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255,255,255,0.78);
  font-weight: 600;
}

.cloud-agent-policy-item small {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.35;
  color: rgba(255,255,255,0.32);
}

.cloud-agent-tools-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 12px;
}

#cloud-agent-section-routing {
  margin-bottom: 12px;
}

.cloud-agent-routing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cloud-agent-routing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
}

.cloud-agent-routing-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cloud-agent-routing-toggle-track {
  position: relative;
  width: 30px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.22);
  transition: background 0.15s, border-color 0.15s;
}

.cloud-agent-routing-toggle-track::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  transition: transform 0.15s;
}

.cloud-agent-routing-toggle input[type="checkbox"]:checked + .cloud-agent-routing-toggle-track {
  background: rgba(255,255,255,0.42);
  border-color: rgba(255,255,255,0.52);
}

.cloud-agent-routing-toggle input[type="checkbox"]:checked + .cloud-agent-routing-toggle-track::after {
  transform: translateX(14px);
}

.cloud-agent-routing-toggle-text {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

.cloud-agent-routing-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
}

.cloud-agent-routing-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cloud-agent-routing-form-title {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255,255,255,0.86);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cloud-agent-routing-provider-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cloud-agent-routing-provider-badge img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.cloud-agent-routing-provider-change-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  text-decoration: underline;
}

.cloud-agent-routing-provider-change-btn:hover {
  color: rgba(255,255,255,0.8);
}

.cloud-agent-routing-provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 10px;
}

.cloud-agent-routing-provider-item {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  position: relative;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  overflow: hidden;
  transition: background 0.15s, border-color 0.15s;
}

.cloud-agent-routing-provider-item:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.2);
}

.cloud-agent-routing-provider-item.is-coming-soon,
.cloud-agent-routing-provider-item.is-coming-soon:hover {
  cursor: not-allowed;
  opacity: 0.62;
}

.cloud-agent-routing-coming-soon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 2px 4px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 3px;
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.78);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  pointer-events: none;
}

.cloud-agent-routing-provider-item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.cloud-agent-routing-provider-item[data-routing-provider-key="openai"] img {
  max-width: 60%;
  max-height: 60%;
}

.cloud-agent-routing-provider-item[data-routing-provider-key="claude"] img {
  max-width: 65%;
  max-height: 65%;
}

.cloud-agent-routing-provider-item[data-routing-provider-key="openrouter"] img {
  width: 72%;
  height: 72%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

.cloud-agent-routing-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cloud-agent-routing-label {
  font-size: 11px;
  line-height: 1.3;
  color: rgba(255,255,255,0.72);
  font-weight: 500;
}

.cloud-agent-routing-textarea {
  min-height: 84px;
  resize: vertical;
}

.cloud-agent-routing-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.cloud-agent-routing-actions .settings-secondary-btn {
  width: auto;
  min-width: 92px;
  flex: 0 0 auto;
}

.cloud-agent-routing-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cloud-agent-routing-test-status {
  font-size: 10px;
  line-height: 1.35;
  color: rgba(255,255,255,0.42);
  min-height: 14px;
}

.cloud-agent-routing-test-status.is-success {
  color: rgba(120,230,155,0.95);
}

.cloud-agent-routing-test-status.is-error {
  color: rgba(255,140,140,0.95);
}

.cloud-agent-routing-form-btns {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  justify-content: flex-end;
}

.cloud-routing-remove-btn {
  width: auto;
  min-width: 92px;
}

.cloud-routing-test-btn {
  width: auto;
  min-width: 92px;
}

#cloud-routing-add-btn i {
  margin-right: 6px;
}

body.light-theme .cloud-agent-routing-toggle-track {
  background: rgba(0,0,0,0.16);
  border-color: rgba(0,0,0,0.24);
}

body.light-theme .cloud-agent-routing-toggle-track::after {
  background: #ffffff;
}

body.light-theme .logs-filter-label,
body.light-theme .logs-summary,
body.light-theme .logs-pagination-text {
  color: rgba(0,0,0,0.62);
}

body.light-theme .logs-filter-input {
  color: #111111;
  background: #ffffff;
  border-color: rgba(0,0,0,0.12);
}

body.light-theme .logs-table-wrap {
  border-color: rgba(0,0,0,0.12);
}

body.light-theme .logs-table thead th {
  color: rgba(0,0,0,0.72);
  background: rgba(0,0,0,0.02);
  border-bottom-color: rgba(0,0,0,0.12);
}

body.light-theme .logs-table tbody td {
  color: rgba(0,0,0,0.84);
  border-bottom-color: rgba(0,0,0,0.06);
}

body.light-theme .logs-empty {
  color: rgba(0,0,0,0.5);
}

body.light-theme .cloud-agent-routing-toggle input[type="checkbox"]:checked + .cloud-agent-routing-toggle-track {
  background: rgba(0,0,0,0.3);
  border-color: rgba(0,0,0,0.36);
}

body.light-theme .cloud-agent-routing-toggle-text {
  color: rgba(0,0,0,0.62);
}

body.light-theme .cloud-agent-routing-form-title {
  color: rgba(0,0,0,0.84);
}

body.light-theme .cloud-agent-routing-provider-change-btn {
  color: rgba(0,0,0,0.5);
}

body.light-theme .cloud-agent-routing-provider-change-btn:hover {
  color: rgba(0,0,0,0.8);
}

body.light-theme .cloud-agent-routing-provider-item {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.12);
}

body.light-theme .cloud-agent-routing-provider-item:hover {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.2);
}

body.light-theme .cloud-agent-routing-label {
  color: rgba(0,0,0,0.68);
}

body.light-theme .cloud-agent-routing-test-status {
  color: rgba(0,0,0,0.55);
}

body.light-theme .cloud-agent-routing-test-status.is-success {
  color: rgba(15,130,65,0.95);
}

body.light-theme .cloud-agent-routing-test-status.is-error {
  color: rgba(190,45,45,0.95);
}

.cloud-agent-tools-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
}

.cloud-agent-body #cloud-agent-section-templates {
  min-height: 0;
}

.cloud-agent-template-search {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  opacity: 0.55;
  cursor: not-allowed;
}

.cloud-agent-template-search-icon {
  font-size: 10px;
  color: rgba(255,255,255,0.25);
  flex-shrink: 0;
}

.cloud-agent-template-search-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  font-size: 11px;
  font-family: 'Inter', sans-serif;
  color: rgba(255,255,255,0.6);
  cursor: not-allowed;
}

.cloud-agent-template-search-input::placeholder {
  color: rgba(255,255,255,0.25);
}

body.light-theme .cloud-agent-template-search {
  border-color: rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
}

body.light-theme .cloud-agent-template-search-icon,
body.light-theme .cloud-agent-template-search-input::placeholder {
  color: rgba(0,0,0,0.35);
}

body.light-theme .cloud-agent-template-search-input {
  color: rgba(0,0,0,0.6);
}

.cloud-agent-tools-heading,
.cloud-agent-tool-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cloud-agent-tools-actions {
  display: flex;
  gap: 6px;
}

.cloud-agent-tool-action,
.cloud-agent-tool-inline-action {
  flex: 0 0 auto;
  width: max-content;
  min-width: max-content;
  padding: 6px 9px;
  font-size: 10px;
  white-space: nowrap;
}

.cloud-agent-tool-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
}

.cloud-agent-tool-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.cloud-agent-tool-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cloud-agent-tool-test,
.cloud-agent-tool-remove {
  flex: 0 0 auto;
  width: max-content;
  min-width: max-content;
  padding: 6px 9px;
  font-size: 10px;
  white-space: nowrap;
}

.cloud-agent-tool-test-status {
  min-height: 13px;
  color: rgba(255,255,255,0.42);
  font-size: 10px;
}

.cloud-agent-tool-test-status.is-success {
  color: rgba(120,220,150,0.9);
}

.cloud-agent-tool-test-status.is-error {
  color: rgba(255,130,130,0.9);
}

.cloud-agent-tool-title,
.cloud-agent-tool-subheading {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.72);
  font-size: 11px;
  font-weight: 600;
}

.cloud-agent-tool-title i,
.cloud-agent-tool-subheading i {
  color: rgba(255,255,255,0.4);
}

.cloud-agent-tool-remove {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
}

.cloud-agent-tool-remove:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.95);
}

.cloud-agent-tool-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cloud-agent-tool-field label {
  color: rgba(255,255,255,0.42);
  font-size: 10px;
}

.cloud-agent-required {
  color: rgba(255,120,120,0.9);
}

.cloud-agent-tool-field .modal-input {
  padding: 7px 9px;
  font-size: 11px;
}

.cloud-agent-tool-field select.modal-input {
  appearance: auto;
}

.cloud-agent-tool-textarea {
  min-height: 58px;
  resize: vertical;
}

.cloud-agent-tool-auth {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 2px;
  padding: 10px;
  border-left: 2px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.025);
}

.cloud-agent-tool-header-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.cloud-agent-tool-header-row .modal-input {
  min-width: 0;
}

.cloud-agent-tool-empty-list {
  padding: 7px 8px;
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 6px;
  color: rgba(255,255,255,0.3);
  font-size: 10px;
  text-align: center;
}

.cloud-agent-tool-section-heading {
  margin-top: 2px;
}

.cloud-agent-tool-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cloud-agent-tool-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  color: rgba(255,255,255,0.5);
  font-size: 10px;
}

.cloud-agent-tool-list-item strong {
  color: rgba(255,255,255,0.75);
  font-weight: 600;
}

.cloud-agent-tool-list-remove {
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
}

.cloud-agent-tool-list-remove:hover {
  color: rgba(255,255,255,0.85);
}

.cloud-agent-tool-parameters {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cloud-agent-tool-parameter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1.4fr) auto auto auto;
  gap: 6px;
  align-items: center;
}

.cloud-agent-tool-parameter .modal-input {
  min-width: 0;
  padding: 7px 9px;
  font-size: 11px;
}

.cloud-agent-tool-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,0.45);
  font-size: 10px;
  white-space: nowrap;
}

.cloud-agent-tool-checkbox input {
  accent-color: rgba(255,255,255,0.7);
}

body.light-theme .cloud-agent-tool-card,
body.light-theme .cloud-agent-tool-auth {
  border-color: rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.025);
}

body.light-theme .cloud-agent-tool-header {
  border-color: rgba(0,0,0,0.1);
}

body.light-theme .cloud-agent-tool-title,
body.light-theme .cloud-agent-tool-subheading {
  color: rgba(0,0,0,0.72);
}

body.light-theme .cloud-agent-tool-title i,
body.light-theme .cloud-agent-tool-subheading i {
  color: rgba(0,0,0,0.4);
}

body.light-theme .cloud-agent-tool-field label {
  color: rgba(0,0,0,0.5);
}

body.light-theme .cloud-agent-tool-empty-list {
  border-color: rgba(0,0,0,0.14);
  color: rgba(0,0,0,0.4);
}

body.light-theme .cloud-agent-tool-test-status {
  color: rgba(0,0,0,0.5);
}

body.light-theme .cloud-agent-tool-test-status.is-success {
  color: rgba(15,130,65,0.95);
}

body.light-theme .cloud-agent-tool-test-status.is-error {
  color: rgba(190,45,45,0.95);
}

body.light-theme .cloud-agent-tool-list-item {
  border-color: rgba(0,0,0,0.1);
  color: rgba(0,0,0,0.5);
}

body.light-theme .cloud-agent-tool-list-item strong,
body.light-theme .cloud-agent-tool-checkbox {
  color: rgba(0,0,0,0.7);
}

.cloud-agent-tools-icon {
  color: rgba(255,255,255,0.35);
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}

.cloud-agent-tools-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cloud-agent-tools-copy strong {
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255,255,255,0.78);
  font-weight: 600;
}

.cloud-agent-tools-copy small {
  font-size: 10px;
  line-height: 1.4;
  color: rgba(255,255,255,0.32);
}

.cloud-agent-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
}

.cloud-agent-file-name {
  flex: 1;
  font-size: 10px;
  line-height: 1.4;
  color: rgba(255,255,255,0.75);
  word-break: break-word;
}

.cloud-agent-file-empty {
  font-size: 10px;
  line-height: 1.4;
  color: rgba(255,255,255,0.28);
}

.cloud-agent-file-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
  cursor: pointer;
}

.cloud-agent-file-remove-btn:hover {
  background: rgba(255, 120, 120, 0.2);
  color: rgba(255, 170, 170, 0.95);
}

.cloud-agent-action-hint {
  display: none;
  margin-top: 4px;
  margin-bottom: 30px;
  font-size: 10px;
  line-height: 1.4;
  color: rgba(255, 185, 120, 0.9);
}

/* Settings modal */
.settings-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  z-index: 3000;
  align-items: center;
  justify-content: center;
}
.settings-modal.open { display: flex; }
.settings-inline-panel {
  display: flex;
  position: relative;
  inset: auto;
  background: none;
  backdrop-filter: none;
  z-index: auto;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  padding: 0;
}
.settings-inline-panel .settings-modal-content {
  width: 100%;
  max-width: 760px;
  margin: 0;
  max-height: none;
  overflow: visible;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 10px 12px 12px;
  box-shadow: none;
}
.settings-inline-panel .settings-modal-header {
  display: none;
}
.settings-inline-panel .settings-modal-close {
  display: none;
}
.settings-modal-content {
  background: rgba(10,10,10,0.97);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 24px;
  width: 400px;
  max-width: calc(100% - 40px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .settings-modal-content { width: 100%; padding: 18px; gap: 16px; }
}
.settings-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.settings-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
}

.settings-modal-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.settings-modal-subtitle-id {
  font-size: 11px;
  color: rgba(255,255,255,0.36);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.settings-modal-close {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.4); font-size: 14px;
  width: 26px; height: 26px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.settings-modal-close:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9); }

.settings-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
}

.menu-inline-notice {
  margin: 0 0 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.settings-section + .settings-section {
  margin-top: 16px;
  padding-top: 0;
}

.menu-content-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
}

.menu-content-section + .menu-content-section {
  margin-top: 16px;
  padding-top: 0;
}

.settings-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}
.settings-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.settings-status-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.15);
  transition: background 0.3s;
}
.settings-status-dot.verified { background: #4ade80; }
.settings-status-dot.pending { background: rgba(255,180,80,0.8); }

.settings-verified-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 7px;
  padding: 9px 12px;
}
.settings-verified-notice i { color: #4ade80; }

.settings-mnemonic-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}
.settings-mnemonic-blur {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: 20px 14px;
  text-align: center;
}
.settings-mnemonic-text {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255,255,255,0.85);
  word-spacing: 4px;
  filter: blur(6px);
  user-select: none;
  transition: filter 0.2s;
}
.settings-mnemonic-blur.revealed .settings-mnemonic-text {
  filter: none;
  user-select: text;
}
.settings-mnemonic-reveal-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
  font-size: 11px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.settings-mnemonic-reveal-btn:hover { background: rgba(255,255,255,0.14); }

.settings-key-wrap {
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 12px 14px;
  max-height: 140px;
  overflow-y: auto;
}
.settings-key-text {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255,255,255,0.7);
  word-spacing: normal;
  white-space: pre-wrap;
  word-break: break-all;
  text-align: left;
}
.settings-mnemonic-blur.revealed .settings-mnemonic-reveal-btn { display: none; }

.settings-mnemonic-actions {
  display: flex;
  gap: 8px;
}
.settings-secondary-btn {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  padding: 8px 0;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s;
}
.settings-secondary-btn:hover { background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.95); }

.settings-danger-btn {
  background: rgba(255,80,80,0.08);
  border: 1px solid rgba(255,80,80,0.25);
  color: rgba(255,120,120,0.9);
  font-size: 11px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  padding: 8px 0;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s;
}
.settings-danger-btn:hover { background: rgba(255,80,80,0.14); color: rgba(255,140,140,1); }
.settings-danger-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.cloud-agent-tools-wrap .cloud-agent-tool-remove {
  flex: 0 0 auto;
  width: max-content;
  min-width: max-content;
  padding: 6px 9px;
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
}

.cloud-agent-tools-wrap .cloud-agent-tool-action,
.cloud-agent-tools-wrap .cloud-agent-tool-inline-action,
.cloud-agent-tools-wrap .cloud-agent-tool-test {
  flex: 0 0 auto;
  width: max-content;
  min-width: max-content;
  padding: 6px 9px;
  white-space: nowrap;
}

.cloud-agent-tools-wrap .cloud-agent-tool-remove:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.95);
}

/* Make the Delete Agent button a matte plain red (no glimmering hover) */
#settings-delete-agent-btn,
#settings-delete-reveal-btn {
  background: #a82222; /* darker matte red */
  border: 1px solid #6e1515;
  color: #ffffff;
  padding: 8px 0;
  border-radius: 7px;
  cursor: pointer;
}
#settings-delete-agent-btn:hover,
#settings-delete-reveal-btn:hover {
  background: #a82222; /* keep same on hover */
  color: #ffffff;
}

.settings-upgrade-btn {
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(255,255,255,1);
  color: rgba(0,0,0,0.88);
  font-size: 11px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  padding: 8px 0;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s;
  margin-top: 10px;
}
.settings-upgrade-btn:hover { background: rgba(255,255,255,0.92); color: rgba(0,0,0,0.96); }
.settings-upgrade-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.account-upgrade-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

#account-subscription-section .account-upgrade-actions {
  margin-top: 2px;
}

#account-subscription-section #account-cancel-plan-btn {
  margin-top: 4px;
}

.account-upgrade-actions .settings-upgrade-btn {
  flex: 1;
  min-width: 0;
  margin-top: 0;
}

.menu-single-action-btn {
  width: min(100%, 320px);
  max-width: 100%;
  flex: 0 1 320px;
  align-self: flex-start;
}

.settings-secondary-btn.menu-single-action-btn,
.settings-upgrade-btn.menu-single-action-btn,
.settings-danger-btn.menu-single-action-btn {
  flex: 0 1 320px;
}

.account-upgrade-actions .menu-single-action-btn {
  flex: 0 1 320px;
}

#cloud-agent-upload-btn.menu-single-action-btn,
#account-cancel-plan-btn.menu-single-action-btn,
#account-upgrade-plus-btn.menu-single-action-btn,
#cloud-routing-add-btn.menu-single-action-btn {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
  align-self: flex-start;
  padding-left: 14px;
  padding-right: 14px;
  white-space: nowrap;
}

#account-a2a-toggle-btn.menu-single-action-btn {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
  align-self: flex-start;
  min-height: 36px;
  padding-left: 14px;
  padding-right: 14px;
  white-space: nowrap;
}

#verification-modal .menu-single-action-btn {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 auto;
  align-self: flex-start;
  padding-left: 14px;
  padding-right: 14px;
  white-space: nowrap;
}

#verification-modal .account-upgrade-actions .settings-upgrade-btn,
#verification-modal .account-upgrade-actions .settings-secondary-btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  padding-left: 14px;
  padding-right: 14px;
  white-space: nowrap;
}

.cloud-agent-body .menu-single-action-btn {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 auto;
  align-self: flex-start;
  padding-left: 14px;
  padding-right: 14px;
  white-space: nowrap;
}

.cloud-agent-body #cloud-agent-upload-btn.menu-single-action-btn,
.cloud-agent-body #cloud-routing-add-btn.menu-single-action-btn {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 auto;
}

#recovery-modal .settings-secondary-btn.menu-single-action-btn,
#recovery-modal .settings-mnemonic-actions .settings-secondary-btn {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 auto;
  align-self: flex-start;
  padding-left: 14px;
  padding-right: 14px;
  white-space: nowrap;
}

#recovery-modal .settings-mnemonic-actions {
  flex-wrap: wrap;
}

#account-cancel-plan-btn,
#cloud-routing-add-btn {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.7) !important;
  font-weight: 500;
}

#account-cancel-plan-btn:hover,
#cloud-routing-add-btn:hover {
  background: rgba(255,255,255,0.09) !important;
  color: rgba(255,255,255,0.95) !important;
}

.account-credit-amount-wrap {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
}

.account-credit-amount-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.account-credit-amount-header .settings-status-text {
  font-size: 11px;
  color: rgba(255,255,255,0.52);
}

.account-credit-amount-header #account-upgrade-plus-amount-value {
  color: rgba(255,255,255,0.7);
  font-weight: 600;
}

.account-credit-preset-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.account-credit-pill {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
  overflow: hidden; /* Changed from visible to hidden to prevent overflow */
  border-radius: 7px;
  padding: 7px 0;
  font-size: 11px;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.15s;
}

.account-credit-pill:hover {
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.92);
}

.account-credit-pill.active {
  background: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.95);
  color: rgba(0,0,0,0.86);
  font-weight: 600;
}

.account-credit-pill-custom {
  font-size: 10px;
}

.account-credit-custom-wrap {
  margin-top: 8px;
}

#account-upgrade-plus-custom {
  text-align: right;
}

.account-upgrade-status {
  display: none;
  margin-top: 10px;
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .account-upgrade-actions {
    flex-direction: column;
  }

  #account-a2a-toggle-btn.menu-single-action-btn {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    align-self: stretch;
    white-space: normal;
    flex: 0 1 auto;
  }

  .account-credit-preset-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

#account-cancel-plan-btn {
  margin-top: 8px;
  display: none;
}

.account-cancel-plan-confirm-wrap {
  display: none;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  background: none;
}

.account-cancel-plan-confirm-text {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 220, 220, 0.9);
  margin-bottom: 10px;
}

#account-cancel-plan-confirm-wrap .settings-delete-actions {
  gap: 10px;
}

#account-cancel-plan-confirm-wrap .settings-secondary-btn,
#account-cancel-plan-confirm-wrap .settings-danger-btn {
  min-height: 34px;
  padding: 8px 12px;
  font-size: 11px;
}

#account-cancel-plan-confirm-wrap .settings-secondary-btn {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.86);
}

#account-cancel-plan-confirm-wrap .settings-secondary-btn:hover {
  background: rgba(255,255,255,0.13);
  color: rgba(255,255,255,0.95);
}

#account-cancel-plan-confirm-wrap .settings-danger-btn {
  background: rgba(255,95,95,0.14);
  border-color: rgba(255,110,110,0.34);
  color: rgba(255,185,185,0.96);
}

#account-cancel-plan-confirm-wrap .settings-danger-btn:hover {
  background: rgba(255,95,95,0.2);
  color: rgba(255,205,205,1);
}

.account-upgrade-status.success {
  display: block;
  color: rgba(120, 230, 160, 0.95);
  background: rgba(80, 220, 140, 0.1);
  border-color: rgba(80, 220, 140, 0.24);
}

.account-upgrade-status.error {
  display: block;
}

#account-a2a-update-status {
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  color: rgba(255,255,255,0.55);
}

#account-a2a-update-status.success,
#account-a2a-update-status.error {
  background: none;
  border: none;
  color: rgba(255,255,255,0.55);
}

#account-email-agent-update-status {
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  color: rgba(255,255,255,0.55);
}

#account-email-agent-update-status.success,
#account-email-agent-update-status.error {
  background: none;
  border: none;
  color: rgba(255,255,255,0.55);
}

.sidebar-toggle-btn {
  background: none; border: none;
  color: rgba(255,255,255,0.25); cursor: pointer;
  font-size: 11px; padding: 0; line-height: 1;
  transition: color 0.15s; flex-shrink: 0;
}
.sidebar-toggle-btn:hover { color: rgba(255,255,255,0.65); }
.messages-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.messages-header {
  position: relative;
  height: 55px;
  padding: 0 12px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.messages-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.messages-header-action-btn {
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #ffffff;
  color: #000000;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.messages-header-action-btn:hover {
  background: #f5f5f5;
  color: #000000;
  border-color: rgba(0,0,0,0.12);
}
.messages-header-action-btn i {
  font-size: 10px;
}
.messages-header-title {
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.7);
  white-space: nowrap;
}
.messages-header.menu-title-align-start .messages-header-center {
  justify-content: flex-start;
  text-align: left;
  padding-left: 20px;
}
.e2e-lock-wrapper { position: static; display: flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.e2e-lock-icon { font-size: 12px; color: rgba(255,255,255,0.3); transition: color 0.2s; }
.e2e-lock-wrapper:hover .e2e-lock-icon,
.e2e-lock-wrapper.active .e2e-lock-icon { color: rgba(255,255,255,0.7); }
.e2e-lock-tooltip {
  display: none;
  position: fixed;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20,20,20,0.97);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
  text-align: center;
}
.e2e-lock-tooltip strong { color: rgba(255,255,255,0.8); font-weight: 500; }
.e2e-lock-wrapper:hover .e2e-lock-tooltip,
.e2e-lock-wrapper.active .e2e-lock-tooltip { display: block; }

#messages-header-lock .e2e-lock-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
.messages-header-session-id {
  font-size: 11px; color: rgba(255,255,255,0.25); font-weight: 400;
  white-space: nowrap;
}
.messages-body {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 16px 90px;
  display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: none;
}
.messages-body::-webkit-scrollbar { display: none; }

.messages-body.sessions-view {
  padding: 0;
  gap: 0;
}

.messages-body.menu-view {
  padding: 0;
  gap: 0;
}

.messages-body.menu-view .primary-view-panel {
  padding-bottom: 15px;
}

.messages-body.menu-view ~ .chat-input-wrap {
  display: none !important;
}

.sessions-picker-layout {
  width: 100%;
  height: 100%;
  display: flex;
  min-height: 0;
}

.sessions-picker-list-pane {
  width: var(--sessions-list-pane-width);
  min-width: var(--sessions-list-pane-width);
  border-right: 1px solid rgba(255,255,255,0.07);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.messages-body.sessions-view ~ .chat-input-wrap {
  left: calc(var(--sessions-list-pane-width) + 16px);
  right: 16px;
  width: auto;
  transform: none;
}

.sessions-picker-preview-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  overflow: hidden;
}

.sessions-chat-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 16px 90px;
  scrollbar-width: none;
}

.sessions-chat-pane::-webkit-scrollbar {
  display: none;
}

.sessions-picker-preview-pane .messages-placeholder {
  width: 100%;
}

.messages-body.sessions-view .sessions-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 14px;
}

.messages-body.sessions-view .session-item {
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background: transparent;
}

.messages-body.sessions-view .session-item.active {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
}

@media (max-width: 980px) {
  .messages-col {
    --sessions-list-pane-width: max(38%, 200px);
  }

  .sessions-picker-list-pane {
    width: var(--sessions-list-pane-width);
    min-width: var(--sessions-list-pane-width);
  }
}

.messages-placeholder {
  height: 100%; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 8px;
  color: rgba(255,255,255,0.15); font-size: 12px;
}
.messages-placeholder i { font-size: 20px; opacity: 0.4; }

.primary-view {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.primary-view-panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 18px 20px 20px;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}

.primary-view-panel::-webkit-scrollbar { display: none; }

.primary-view-panel .cloud-agent-body,
.primary-view-panel .agent-form,
.primary-view-panel .mcp-body {
  width: 100%;
  max-width: 760px;
  margin: 0;
  padding: 10px 12px 12px;
  background: transparent;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.logs-toolbar {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.logs-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.logs-page-size-group {
  max-width: 110px;
}

.logs-filter-label {
  font-size: 11px;
  color: rgba(255,255,255,0.52);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.logs-filter-input {
  width: 100%;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.9);
  padding: 0 10px;
  font-size: 12px;
  font-family: inherit;
  line-height: 34px;
  outline: none;
}

select.logs-filter-input {
  padding-right: 28px;
}

.logs-filter-input:focus {
  border-color: rgba(255,255,255,0.2);
}

.logs-filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  grid-column: 1 / -1;
}

.logs-filter-actions .settings-secondary-btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  padding-left: 12px;
  padding-right: 12px;
}

.logs-summary {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(255,255,255,0.65);
}

.logs-table-wrap {
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: auto;
}

.logs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 680px;
}

.logs-table thead th {
  text-align: left;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.logs-table tbody td {
  padding: 10px 12px;
  color: rgba(255,255,255,0.82);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  vertical-align: top;
}

.logs-table tbody tr:last-child td {
  border-bottom: none;
}

.logs-empty {
  text-align: center;
  color: rgba(255,255,255,0.45);
  padding: 18px 12px !important;
}

.logs-response-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid transparent;
}

.logs-response-pill.is-ok {
  color: rgba(159, 255, 188, 0.95);
  background: rgba(61, 186, 101, 0.14);
  border-color: rgba(61, 186, 101, 0.28);
}

.logs-response-pill.is-error {
  color: rgba(255, 170, 170, 0.95);
  background: rgba(191, 79, 79, 0.14);
  border-color: rgba(191, 79, 79, 0.28);
}

.logs-pagination {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.logs-pagination-text {
  font-size: 12px;
  color: rgba(255,255,255,0.62);
}

@media (max-width: 900px) {
  .settings-inline-panel .settings-modal-content,
  .primary-view-panel .cloud-agent-body,
  .primary-view-panel .agent-form,
  .primary-view-panel .mcp-body {
    max-width: none;
  }

  .logs-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .logs-filter-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .logs-toolbar {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .logs-page-size-group {
    max-width: none;
  }

  .logs-filter-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: stretch;
  }

  .logs-filter-actions .settings-secondary-btn {
    width: 100%;
  }
}

.primary-view-panel .agent-form {
  gap: 12px;
}

.primary-view-panel .cloud-agent-body {
  gap: 12px;
  padding-bottom: 44px;
}

.msg-bubble {
  max-width: 80%; min-width: 0; display: flex; flex-direction: column; gap: 3px;
}
.msg-bubble.mine { align-self: flex-end; align-items: flex-end; }
.msg-bubble.theirs { align-self: flex-start; align-items: flex-start; }

.msg-text {
  padding: 8px 12px; border-radius: 12px;
  min-width: 0;
  max-width: 100%;
  font-size: 12px; line-height: 1.5; word-break: break-word;
}
.msg-text p, .task-query p { margin: 0 0 6px; }
.msg-text p:last-child, .task-query p:last-child { margin-bottom: 0; }
.msg-text strong, .task-query strong { font-weight: 600; color: rgba(255,255,255,0.95); }
.msg-text em, .task-query em { font-style: italic; }
.msg-text code, .task-query code {
  background: rgba(255,255,255,0.08); border-radius: 4px;
  overflow-x: auto; /* Changed from hidden to auto for better horizontal scrolling */
  word-break: break-word;
  -webkit-overflow-scrolling: touch; /* Added for better scrolling on iOS */
  overscroll-behavior-y: contain; /* Added to control the behavior of scrolling */
  overflow-wrap: anywhere;
}
.msg-text pre, .task-query pre {
  background: rgba(255,255,255,0.05); border-radius: 8px;
  padding: 10px 12px; overflow-x: auto; margin: 6px 0;
  max-width: 100%;
}
.msg-text pre code, .task-query pre code {
  background: none; padding: 0; font-size: 11px;
  word-break: normal;
  overflow-wrap: normal;
  white-space: pre;
}
.msg-text ul, .msg-text ol, .task-query ul, .task-query ol {
  margin: 4px 0 4px 16px; padding: 0;
}
.msg-text li, .task-query li { margin: 2px 0; }
.msg-text h1, .msg-text h2, .msg-text h3,
.task-query h1, .task-query h2, .task-query h3 {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.9);
  margin: 8px 0 4px;
}
.msg-text a, .task-query a { color: rgba(150,180,255,0.8); text-decoration: underline; }
.msg-text blockquote, .task-query blockquote {
  border-left: 2px solid rgba(255,255,255,0.15);
  margin: 4px 0; padding-left: 10px;
  color: rgba(255,255,255,0.45);
}
.msg-text hr, .task-query hr { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 8px 0; }
.msg-bubble.mine .msg-text {
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.85);
  border-bottom-right-radius: 4px;
}
.msg-bubble.theirs .msg-text {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.75);
  border-bottom-left-radius: 4px;
}

body.light-theme .msg-bubble.mine .msg-text {
  background: #111111;
  color: #ffffff;
}

body.light-theme .msg-bubble.theirs .msg-text {
  background: #f0f1f3;
  color: #111111;
}

body.light-theme .msg-meta {
  color: rgba(0,0,0,0.45);
}

body.light-theme .msg-meta-sender {
  color: rgba(0,0,0,0.65);
}

body.light-theme .msg-system {
  color: rgba(0,0,0,0.45);
}

body.light-theme .task-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
}

body.light-theme .task-query {
  color: #111111;
}

body.light-theme .task-divider {
  background: rgba(0,0,0,0.08);
}

.msg-meta {
  font-size: 10px; color: rgba(255,255,255,0.2);
  padding: 0 4px; display: flex; gap: 6px; align-items: center;
}
.msg-meta-sender { color: rgba(255,255,255,0.3); font-weight: 500; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-meta-dot { opacity: 0.3; }
.msg-meta-time { white-space: nowrap; }

.msg-system {
  align-self: center;
  font-size: 11px; color: rgba(255,255,255,0.22);
  padding: 2px 10px;
  text-align: center;
}

.msg-loading {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: rgba(255,255,255,0.2); font-size: 12px; gap: 8px;
}

/* Task card (agent messages with elements) */
.task-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
  max-width: 80%;
  min-width: 0;
  align-self: flex-start;
}
.task-query {
  min-width: 0;
  max-width: 100%;
  font-size: 13px; color: rgba(255,255,255,0.75); line-height: 1.5;
}
.task-divider { height: 1px; background: rgba(255,255,255,0.06); }
.task-meta {
  font-size: 10px; color: rgba(255,255,255,0.2);
  display: flex; gap: 6px; align-items: center;
}
.task-meta-sender { color: rgba(255,255,255,0.3); font-weight: 500; }

/* Element types */
.element-row { display: flex; gap: 8px; flex-wrap: wrap; }

.element-btn {
  padding: 7px 18px; border-radius: 8px;
  font-size: 12px; font-weight: 500; font-family: 'Inter', sans-serif;
  cursor: pointer; border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7);
  transition: background 0.15s, color 0.15s;
}
.element-btn:hover:not(:disabled) { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.95); }
.element-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.element-btn.selected { border-color: rgba(255,255,255,0.4); color: rgba(255,255,255,0.95); background: rgba(255,255,255,0.1); }

.element-input-row { display: flex; gap: 8px; margin-top: 4px; }
.element-input {
  -webkit-appearance: none; appearance: none;
  flex: 1; background: #1c1c1c;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 8px;
  padding: 7px 12px; font-size: 12px; font-family: 'Inter', sans-serif;
  color: rgba(255,255,255,0.85); outline: none; box-sizing: border-box;
  transition: border-color 0.15s;
}
.element-input::placeholder { color: rgba(255,255,255,0.25); }
.element-input:focus { border-color: rgba(255,255,255,0.28); }
.element-input:disabled { opacity: 0.35; cursor: not-allowed; }

.element-field-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: rgba(255,255,255,0.35); margin-bottom: 3px;
}

.element-file-wrap { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.element-file-label {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px dashed rgba(255,255,255,0.12);
  border-radius: 8px; cursor: pointer;
  font-size: 12px; color: rgba(255,255,255,0.4);
  transition: border-color 0.15s, color 0.15s;
}
.element-file-label:hover { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.7); }
.element-file-label.has-file { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.75); }

.element-file-card {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; background: rgba(255,255,255,0.02);
}
.element-file-card-info { flex: 1; min-width: 0; }
.element-file-card-name { font-size: 12px; color: rgba(255,255,255,0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.element-file-card-size { font-size: 10px; color: rgba(255,255,255,0.3); margin-top: 2px; }

.element-table {
  width: 100%; border-collapse: collapse; margin-top: 6px;
  font-size: 12px; font-family: 'Inter', sans-serif;
}
.element-table th {
  text-align: left; padding: 6px 10px;
  color: rgba(255,255,255,0.35); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08); white-space: nowrap;
}
.element-table td {
  padding: 7px 10px; color: rgba(255,255,255,0.75);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.element-table tr:last-child td { border-bottom: none; }


/* Agent sidebar form */
.agent-form {
  padding: 10px 12px 12px;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1; min-height: 0;
}
.new-session-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-shrink: 0;
  justify-content: flex-start;
}
.new-session-cancel-btn {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.8);
  font-size: 11px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.new-session-cancel-btn:hover {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.95);
  border-color: rgba(255,255,255,0.22);
}
.agent-instruct-area {
  flex: 1; min-height: 60px;
  resize: none;
  line-height: 1.5; padding-top: 9px; padding-bottom: 9px;
  background: transparent !important; outline: none;
}
.agent-form .agent-instruct-area {
  flex: 0 0 auto;
  min-height: 110px;
  height: 110px;
}

/* Make the instruction textarea visually match the transparent inputs */
.agent-form .agent-instruct-area {
  background: transparent !important;
  border: none;
  padding: 6px 8px;
  color: rgba(255,255,255,0.9);
  box-shadow: none;
  resize: none;
}
.agent-form .agent-instruct-area::placeholder { color: rgba(255,255,255,0.45); }

/* Bordered container for the instruct block */
.instruct-block {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  margin-bottom: 10px;
}
.instruct-block .new-session-label { margin-bottom: 6px; display: block; }

/* Align textarea content with the label: reduce left padding to match labels */
.instruct-block .agent-instruct-area {
  box-sizing: border-box;
  width: 100%;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 2px;
  padding-right: 8px;
}
.agent-form-error {
  font-size: 11px; color: rgba(255,255,255,0.6); display: none; flex-shrink: 0;
  text-align: left;
}
.agent-subject-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.new-session-top-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  width: 100%;
}

.new-session-top-row .modal-input-wrap,
.new-session-top-row .agent-subject-wrap {
  min-width: 0;
}
.agent-subject-label {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
.agent-create-btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
  padding: 8px 14px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  color: #000000;
  font-size: 11px; font-weight: 600; font-family: 'Inter', sans-serif;
  cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap;
}
.agent-create-btn:hover { background: #f5f5f5; color: #000000; border-color: rgba(0,0,0,0.12); }
.agent-create-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.modal-input {
  width: 100%; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 9px 12px;
  font-size: 12px; font-family: 'Inter', sans-serif;
  color: rgba(255,255,255,0.85); outline: none;
  transition: border-color 0.15s;
}
.modal-input::placeholder { color: rgba(255,255,255,0.2); }
.modal-input:focus { border-color: rgba(255,255,255,0.25); }
.modal-input:read-only {
  cursor: not-allowed;
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.72);
}

.modal-tabs {
  display: flex; gap: 2px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px; padding: 3px;
  margin-bottom: 12px;
}
.modal-tab {
  flex: 1; text-align: center;
  padding: 5px 0; border-radius: 6px;
  font-size: 11px; font-weight: 500; font-family: 'Inter', sans-serif;
  color: rgba(255,255,255,0.35); cursor: pointer;
  transition: all 0.15s; border: none; background: none;
}
.modal-tab.active {
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.85);
}

.modal-error {
  font-size: 11px; color: rgba(255,80,80,0.8);
  margin-top: 8px; display: none;
}

.modal-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  width: auto;
  min-width: 0;
  max-width: none;
  background: rgba(18,18,18,0.98);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(0,0,0,0.42);
  z-index: 12;
  display: none;
  max-height: 180px;
  overflow-y: auto;
  scrollbar-width: none;
}
.modal-dropdown::-webkit-scrollbar { display: none; }
.modal-dropdown.open { display: block; }

.modal-input-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.modal-dropdown-item {
  padding: 8px 12px; cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.modal-dropdown-item:last-child { border-bottom: none; }
.modal-dropdown-item:hover { background: rgba(255,255,255,0.06); }
.modal-dropdown-item.focused { background: rgba(255,255,255,0.06); }

.modal-dropdown-agent-id {
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 6px;
  justify-content: space-between;
}
.modal-dropdown-operator {
  font-size: 11px; color: rgba(255,255,255,0.3);
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.modal-dropdown-meta-line {
  font-size: 11px; color: rgba(255,255,255,0.25);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.modal-dropdown-badge {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  padding: 1px 5px; border-radius: 4px;
  background: rgba(80,200,120,0.12);
  border: 1px solid rgba(80,200,120,0.25);
  color: rgba(80,200,120,0.8);
  flex-shrink: 0;
  margin-left: auto;
}
.modal-input-wrap { position: relative; }

@media (max-width: 768px) {
  .new-session-top-row {
    grid-template-columns: 1fr;
  }
}

/* Agent identity row */
.tx-id-row {
  display: flex; gap: 8px;
  margin-top: 12px; align-items: center;
  height: 44px; flex-shrink: 0; position: relative;
}

.agent-info-box {
  height: 44px; padding: 0 16px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; gap: 12px;
  flex: 1; min-width: 0;
}

.agent-name { color: rgba(255,255,255,0.95); font-size: 13px; font-weight: 600; white-space: nowrap; }
.agent-id { color: rgba(255,255,255,0.35); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-divider { width: 1px; height: 16px; background: rgba(255,255,255,0.1); flex-shrink: 0; }

.tx-action-btn {
  width: 44px; height: 44px; border-radius: 10px;
  background: none; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s;
  text-decoration: none; color: rgba(255,255,255,0.5);
  font-size: 15px; flex-shrink: 0;
}
.tx-action-btn:hover { color: rgba(255,255,255,0.8); }
.tx-action-btn i.verified { color: #4ade80; }
.tx-action-btn:hover i.verified { color: #6ee89a; }

/* ════════════════════════════════════════════════════════════════════════
   Mobile — single-pane navigation between sessions / messages / agent info
   ════════════════════════════════════════════════════════════════════════ */

.mobile-only { display: none; }

@media (max-width: 768px) {
  /* Prevent iOS/Safari input focus zoom: keep editable controls at >=16px */
  input,
  textarea,
  select,
  .field-input,
  .word-input,
  .modal-input,
  .compose-input,
  .element-input,
  .chat-textarea {
    font-size: 16px !important;
  }

  .titlebar-center .app-version,
  .titlebar-center .app-divider { display: none; }
  .docs-link-btn {
    padding: 6px 8px;
    margin-right: 4px;
    gap: 0;
  }
  .docs-link-btn span { display: none; }

  .messages-header {
    padding: 8px 12px 8px 8px;
  }
  .messages-header.has-header-actions .messages-header-center {
    width: calc(100% - 124px);
  }
  .messages-header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: calc(100% - 88px);
    pointer-events: none;
  }
  .messages-header.menu-title-align-start .messages-header-center {
    left: 50%;
    top: 50%;
    right: auto;
    width: calc(100% - 88px);
    transform: translate(-50%, -50%);
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding-left: 0;
  }
  .messages-header-session-id {
    display: block !important;
    font-size: 10px;
    color: rgba(255,255,255,0.34);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .messages-header-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #messages-header-lock {
    display: none !important;
  }
  .messages-header-action-btn {
    width: 30px;
    min-width: 30px;
    height: 30px;
    padding: 0;
    gap: 0;
  }
  .messages-header-action-btn span {
    display: none;
  }
  #messages-header-divider { display: none !important; }
  #messages-header-lock .e2e-lock-tooltip {
    left: 50%; right: auto; transform: translateX(-50%);
  }

  .agent-id, .agent-divider { display: none; }
  .agent-name { overflow: hidden; text-overflow: ellipsis; }
  .agent-info-box { gap: 8px; }
  .tx-action-btn {
    width: 36px;
    height: 36px;
    font-size: 13px;
    border-radius: 8px;
  }

  /* Auth view — Connect / Create */
  .main {
    top: 48px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .left-panel { display: none; }
  .right-panel {
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px 0 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-branding {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 20px 16px;
  }
  .mobile-branding-logo {
    width: 56px;
    height: 56px;
  }
  .tabs {
    justify-content: center;
  }
  #view-connect .view-title,
  #view-connect .view-subtitle,
  #view-create .view-title,
  #view-create .view-subtitle {
    text-align: center;
  }
  .card {
    padding: 0 20px 24px;
    max-width: 100%;
    box-sizing: border-box;
  }
  .mnemonic-grid { grid-template-columns: repeat(3, 1fr); }

  .tx-container { padding: 8px; top: 48px; }

  .mobile-only { display: flex; }

  /* Each column becomes a full-width pane; .tx-panel's mobile-pane-* class controls which is shown */
  .sessions-col,
  .messages-col,
  .agent-col {
    width: 100%;
    flex-shrink: 0;
    border-right: none;
    border-left: none;
  }

  .sessions-col { position: relative; }
  .sessions-col.collapsed { width: 100%; }
  .sessions-col.collapsed .sessions-list,
  .sessions-col.collapsed .sessions-col-header { display: flex; }

  .sessions-fab {
    position: absolute;
    right: 16px; bottom: 16px;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: #fff; color: #000; border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    transition: transform 0.15s, background 0.15s;
  }
  .sessions-fab:active { transform: scale(0.94); background: rgba(255,255,255,0.85); }

  /* Default: show main dashboard/messages pane */
  .messages-col { display: flex; }
  .agent-col { display: none; }

  .tx-panel.mobile-pane-messages .sessions-col { display: none; }
  .tx-panel.mobile-pane-messages .messages-col { display: flex; }
  .tx-panel.mobile-pane-messages .agent-col { display: none; }

  .tx-panel.mobile-pane-agent .sessions-col { display: none; }
  .tx-panel.mobile-pane-agent .messages-col { display: none; }
  .tx-panel.mobile-pane-agent .agent-col { display: flex; }

  #agent-col-open-btn {
    display: none !important;
  }

  .sessions-picker-layout {
    display: block;
  }

  .sessions-picker-list-pane {
    width: 100%;
    min-width: 0;
    border-right: none;
  }

  .sessions-picker-preview-pane {
    display: none;
  }

  .messages-body.sessions-view.mobile-chat-open .sessions-picker-list-pane {
    display: none;
  }

  .messages-body.sessions-view.mobile-chat-open .sessions-picker-preview-pane {
    display: flex;
    width: 100%;
    min-height: 0;
  }

  .messages-body.sessions-view:not(.mobile-chat-open) ~ .chat-input-wrap {
    display: none !important;
  }

  .messages-body.sessions-view.mobile-chat-open ~ .chat-input-wrap {
    display: block !important;
  }

  .messages-body.sessions-view ~ .chat-input-wrap {
    left: 10px;
    right: 10px;
    width: auto;
    transform: none;
  }

  .chat-input-wrap {
    left: 10px;
    right: 10px;
    width: auto;
    transform: none;
    bottom: 8px;
  }

  #agent-col-back-btn {
    align-items: center; gap: 6px; padding: 12px 14px; flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 12px; color: rgba(255,255,255,0.6);
  }
}