/* ============================================================
   Tokvian Chat Playground & Advanced Workspace Design
   ============================================================ */

/* 1. Base Shared & Video Workspace */
.vision-controls{display:flex;align-items:center;gap:10px;padding:8px 0 6px;font-size:12px;color:var(--muted,#9ca3af);flex-wrap:wrap}
.vision-controls label{cursor:pointer}
.vision-controls label:has(input:disabled){opacity:.45;cursor:not-allowed}
[hidden],.vision-controls [hidden],#vision-file[hidden],#vision-clear[hidden],.composer-sub-row [hidden]{display:none!important}
#vision-preview{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.attachment-card{position:relative;display:inline-flex;align-items:center;justify-content:center;margin:4px 0 8px;padding:4px;width:auto;height:auto;box-sizing:border-box;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:14px;box-shadow:0 4px 12px rgba(0,0,0,.25);transition:border-color .2s}
.attachment-card:hover{border-color:rgba(255,255,255,.28)}
#vision-preview .attachment-card img{display:block!important;height:72px!important;width:auto!important;min-width:36px!important;max-width:160px!important;object-fit:contain!important;margin:0!important;border-radius:6px!important}
.attachment-card .icon-btn,.attachment-card [data-remove-photo],.attachment-card .attachment-remove-btn{position:absolute!important;right:-7px!important;top:-7px!important;width:22px!important;height:22px!important;min-width:22px!important;max-width:22px!important;min-height:22px!important;max-height:22px!important;border-radius:50%!important;aspect-ratio:1 / 1!important;background:#1b1e22!important;border:1px solid rgba(255,255,255,.28)!important;color:#e4e4e7!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;margin:0!important;cursor:pointer!important;transition:background .15s,color .15s,transform .15s!important;z-index:10!important;box-shadow:0 2px 6px rgba(0,0,0,.35)!important;flex-shrink:0!important;box-sizing:border-box!important}
.attachment-card .icon-btn:hover,.attachment-card [data-remove-photo]:hover,.attachment-card .attachment-remove-btn:hover{background:#282c32!important;color:#fff!important;border-color:rgba(255,255,255,.5)!important;transform:scale(1.08)!important}
.attachment-card .icon-btn .icon,.attachment-card [data-remove-photo] .icon,.attachment-card .icon-btn svg,.attachment-card [data-remove-photo] svg{width:11px!important;height:11px!important;min-width:11px!important;min-height:11px!important;max-width:11px!important;max-height:11px!important;display:block!important;flex-shrink:0!important;pointer-events:none!important}
.attachment-error{font-size:12.5px;color:#fca5a5;line-height:1.5;margin:4px 0 8px;padding:6px 12px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.22);border-radius:8px}
.attachment-error:empty{display:none}
.composer.attachment-drop{outline:2px dashed var(--accent,#9aefd2)!important;outline-offset:-3px;background:rgba(154,239,210,.06)!important;border-color:var(--accent,#9aefd2)!important}
.chat-photo{max-width:min(100%,420px);max-height:320px;border-radius:8px;display:block;margin:12px 0 8px;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.chat-photos{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 6px}
.chat-photos .chat-photo{max-width:min(100%,320px);max-height:240px;border-radius:14px;margin:0;border:1px solid rgba(255,255,255,.12);box-shadow:0 6px 20px rgba(0,0,0,.35);object-fit:cover;transition:transform .2s ease}
.chat-photos .chat-photo:hover{transform:scale(1.02)}
.chat-photo-wrap{position:relative;display:inline-flex;margin:0;padding:0}
.chat-photo-remove-btn{position:absolute!important;top:6px!important;right:6px!important;width:26px!important;height:26px!important;min-width:26px!important;min-height:26px!important;border-radius:50%!important;background:rgba(15,17,21,.82)!important;border:1px solid rgba(255,255,255,.28)!important;color:#f4f4f6!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;cursor:pointer!important;opacity:0;transition:opacity .15s,background .15s,transform .15s!important;z-index:5!important;box-shadow:0 2px 8px rgba(0,0,0,.45)!important}
.chat-photo-wrap:hover .chat-photo-remove-btn,.chat-photo-remove-btn:focus-visible{opacity:1}
@media (hover:none){.chat-photo-remove-btn{opacity:1}}
.chat-photo-remove-btn:hover{background:#ef4444!important;border-color:#ef4444!important;color:#fff!important;transform:scale(1.08)!important}
.chat-photo-remove-btn svg,.chat-photo-remove-btn .icon{width:13px!important;height:13px!important;pointer-events:none!important}

/* Video Workspace & Image-to-Video Studio */
[data-page=videos] .page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 42px;
  padding: 0;
  margin-bottom: 16px;
  gap: 16px;
  box-sizing: border-box;
}

[data-page=videos] .page-header h1 {
  font-size: 26px !important;
  letter-spacing: -0.8px !important;
  font-weight: 600 !important;
  color: var(--text, #f4f4f6) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

[data-page=videos] .page-header .btn {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 16px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #e2e2e8 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-page=videos] .page-header .btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

.video-workspace {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1.2fr);
  gap: 20px;
  align-items: start;
}
.video-creator-panel,
.video-history-panel {
  display: flex;
  flex-direction: column;
}
.video-creator-panel {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}
.video-panel-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.video-panel-title-wrap h2 {
  font-size: 18px;
  font-weight: 600;
  color: #f4f4f6;
  margin: 0;
}
.video-panel-subtitle {
  font-size: 15px;
  color: #9da0b3;
  font-weight: 500;
}
#video-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#video-form.attachment-drop {
  outline: 2px dashed var(--accent, #9aefd2) !important;
  outline-offset: -3px;
  background: rgba(154, 239, 210, 0.04) !important;
  border-radius: 8px;
}
#video-form .field {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#video-form .field label,
.video-reference-label {
  font-size: 15px;
  font-weight: 600;
  color: #e2e2ea;
  display: flex;
  align-items: center;
  gap: 8px;
}
.video-reference-label small {
  font-size: 15px;
  font-weight: 400;
  color: #9da0b3;
}
#video-model {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #f4f4f6;
  font-family: inherit;
  font-size: 15px;
  outline: none;
  cursor: pointer;
  transition: all 0.18s ease;
}
#video-model:focus {
  border-color: var(--accent, #9aefd2);
  box-shadow: 0 0 0 2px rgba(154, 239, 210, 0.15);
  background: rgba(255, 255, 255, 0.06);
}
#video-model option {
  background: #14171b;
  color: #f4f4f6;
}
#video-prompt {
  flex: 1 1 auto;
  min-height: 28px;
  max-height: 160px;
  height: 28px;
  padding: 3px 6px;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: #f4f4f6;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: none;
  outline: none;
  box-sizing: border-box;
}
#video-prompt:focus {
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
}
#video-prompt::placeholder {
  color: #656573;
}

/* Reference Photo Upload & Preview */
.video-reference-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  margin-bottom: 2px;
}
.video-reference-preview img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}
.video-reference-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.video-reference-meta strong {
  font-size: 15px;
  font-weight: 600;
  color: #f2f2f5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.video-reference-meta small {
  font-size: 15px;
  color: #8e8e9e;
}
.video-remove-ref-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 8px !important;
  font-size: 15px !important;
  border-radius: 6px !important;
  margin-top: 2px !important;
  align-self: flex-start !important;
  color: #fca5a5 !important;
  cursor: pointer !important;
}
.video-remove-ref-btn:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #fff !important;
}
.video-upload-button {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 40px;
  padding: 0 14px !important;
  border: 1.5px dashed rgba(154, 239, 210, 0.35) !important;
  border-radius: 9px;
  cursor: pointer;
  color: var(--accent, #9aefd2) !important;
  background: rgba(154, 239, 210, 0.03);
  font-size: 15px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  overflow: hidden;
  box-sizing: border-box !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.video-upload-button:hover:not(.is-disabled) {
  background: rgba(154, 239, 210, 0.065);
  border-color: rgba(154, 239, 210, 0.5);
  transform: translateY(-1px);
}
.video-upload-button svg,
.video-upload-button .icon {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}
.video-upload-button input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.video-upload-button.is-disabled {
  opacity: 0.5;
  cursor: wait;
}
.video-upload-note {
  font-size: 15px;
  color: #9da0b3;
  margin: 2px 0 0 2px;
  line-height: 1.4;
}

/* Prompt suggestions with smooth fade-out mask */
.video-prompt-suggestions {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 8px;
  margin-top: 4px;
  padding: 2px 20px 2px 2px;
  mask-image: linear-gradient(to right, black 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 82%, transparent 100%);
}
.video-prompt-suggestions::-webkit-scrollbar {
  display: none;
}
.prompt-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #c4c4d6;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: all 0.18s ease;
}
.prompt-chip:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(154, 239, 210, 0.4);
  color: #fff;
  transform: translateY(-1px);
}

/* Options & Segmented Controls */
.video-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.video-segmented-group {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  box-sizing: border-box;
}
.video-segment-btn {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #a4a4b4;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  white-space: nowrap;
}
.video-segment-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.video-segment-btn.is-active {
  background: rgba(154, 239, 210, 0.12);
  border-color: rgba(154, 239, 210, 0.45);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Quote Card & Specs Row */
.video-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0 12px;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-sizing: border-box;
}
.video-spec-cell {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
}
.video-spec-cell .spec-label {
  font-size: 15px;
  color: #9da0b3;
}
.video-spec-cell strong {
  display: block;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #f4f4f6;
}
.video-submit-btn {
  min-height: 46px !important;
  height: 46px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
.video-form-note {
  font-size: 15px;
  color: #9da0b3;
  text-align: left;
  margin: 10px 0 0 0;
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-sizing: border-box;
}
.video-form-note .inline-shield {
  color: var(--accent, #9aefd2);
  flex-shrink: 0;
  display: inline-flex;
  margin-top: 2px;
}
.video-form-note .inline-shield svg,
.video-form-note .inline-shield .icon {
  width: 16px;
  height: 16px;
}
.video-retention-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #c4c4d6;
  white-space: nowrap;
}

/* Video Right Panel: Cinema Stage & Filmstrip */
.video-history-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.video-history-title-wrap h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: #f4f4f6;
}
.video-history-title-wrap .count-pill {
  font-size: 15px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #c4c4d6;
}
.video-window-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.video-single-window {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  height: 100%;
}
.video-stage-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.video-single-window.video-window-empty {
  align-items: center;
  justify-content: center;
}
.video-stage-frame {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #07080a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.65);
}
.video-stage-frame video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  outline: none;
  border-radius: 8px;
}
.video-stage-overlay-bar {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  z-index: 5;
  pointer-events: none;
}
.video-overlay-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  background: rgba(10, 12, 16, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 4px 10px;
  pointer-events: auto;
}
.video-overlay-pill {
  font-size: 15px;
  font-weight: 600;
  color: #d4d4e0;
}
.video-overlay-pill.model-pill {
  color: #fff;
  font-weight: 600;
}
.video-overlay-pill.res-pill {
  color: #d4d4e0;
  font-weight: 500;
}
.video-overlay-date {
  font-size: 15px;
  color: #8e8e9e;
  margin-left: 2px;
}
.video-overlay-status {
  pointer-events: auto;
}
.video-overlay-status .pill {
  font-size: 15px;
}
.video-stage-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.video-actions-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.video-download-btn,
.video-copy-btn,
.video-reuse-btn,
.video-delete-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 14px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.video-download-btn {
  background: var(--accent, #9aefd2) !important;
  color: #082119 !important;
  border: 1px solid #bbf8e2 !important;
}
.video-download-btn:hover {
  background: #bbf8e2 !important;
  box-shadow: 0 3px 12px rgba(154, 239, 210, 0.35);
  transform: translateY(-1px);
}
.video-copy-btn,
.video-reuse-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #e2e2e8 !important;
}
.video-copy-btn:hover,
.video-reuse-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  transform: translateY(-1px);
}
.video-delete-btn {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.28) !important;
  color: #f87171 !important;
}
.video-delete-btn:hover {
  background: rgba(239, 68, 68, 0.24) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  color: #fff !important;
  transform: translateY(-1px);
}
.video-download-btn svg,
.video-copy-btn svg,
.video-reuse-btn svg,
.video-delete-btn svg {
  width: 15px !important;
  height: 15px !important;
}
.video-nav-arrows {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.video-nav-arrows .btn {
  min-height: 34px;
  padding: 4px 10px;
  font-size: 15px;
}
.video-nav-pos {
  font-size: 15px;
  color: #9da0b3;
  font-weight: 500;
  user-select: none;
}
.video-retention-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 15px;
  color: #c4c4d6;
  line-height: 1.45;
  box-sizing: border-box;
  flex-shrink: 0;
}
.video-retention-notice svg,
.video-retention-notice .icon {
  width: 16px;
  height: 16px;
  color: var(--accent, #9aefd2);
  flex-shrink: 0;
}
.video-overlay-pill.video-retention-pill {
  color: #c4c4d6;
  border-color: rgba(255, 255, 255, 0.1);
}
.video-stage-prompt-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
  min-height: 36px;
  box-sizing: border-box;
}
.video-stage-prompt-card .prompt-icon {
  font-size: 15px;
  flex-shrink: 0;
}
.video-stage-prompt-card .prompt-content {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  color: #c4c4d6;
}
.video-stage-prompt-card .prompt-label {
  font-weight: 600;
  color: #e2e2ea;
  margin-right: 4px;
}
.video-stage-prompt-card .prompt-copy-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 6px;
  background: transparent;
  color: #a4a4b4;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}
.video-stage-prompt-card .prompt-copy-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.15);
}
.video-stage-prompt-card .prompt-copy-btn svg {
  width: 14px;
  height: 14px;
}

/* Filmstrip Component */
.video-filmstrip {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
  margin-top: 2px;
}
.video-filmstrip-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.filmstrip-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.filmstrip-head-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.filmstrip-counter {
  font-size: 15px;
  font-weight: 600;
  color: #9da0b3;
  margin-right: 4px;
}
.filmstrip-nav-btn {
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 10px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #d4d4e0 !important;
  cursor: pointer;
  transition: all 0.15s ease !important;
}
.filmstrip-nav-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}
.filmstrip-nav-btn:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}
.video-filmstrip-head .filmstrip-title {
  font-size: 15px;
  font-weight: 600;
  color: #e2e2ea;
}
.video-filmstrip-head .filmstrip-hint {
  font-size: 15px;
  color: #8e8e9e;
}
.video-filmstrip-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  padding: 4px 4px 14px !important;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
  contain: paint layout;
}
.video-filmstrip-track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto !important;
}
.video-filmstrip-track::-webkit-scrollbar {
  height: 5px;
}
.video-filmstrip-track::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
}
.video-filmstrip-track::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}
.video-filmstrip-track::-webkit-scrollbar-thumb:hover {
  background: var(--accent, #9aefd2);
}
.video-filmstrip-card {
  flex: 0 0 260px;
  min-width: 260px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.16s ease;
  user-select: none;
  box-sizing: border-box;
}
.video-filmstrip-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}
.video-filmstrip-card.is-active {
  background: rgba(154, 239, 210, 0.08);
  border-color: var(--accent, #9aefd2);
  box-shadow: 0 0 12px rgba(154, 239, 210, 0.22);
}
.filmstrip-card-thumb {
  width: 44px;
  height: 44px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}
.filmstrip-thumb-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  background: #000;
}
.filmstrip-thumb-play svg {
  width: 18px;
  height: 18px;
  color: var(--accent, #9aefd2);
}
.filmstrip-thumb-fail {
  color: #f87171;
  font-weight: 600;
  font-size: 15px;
}
.filmstrip-card-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.filmstrip-card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.filmstrip-card-model {
  font-size: 15px;
  font-weight: 600;
  color: #f4f4f6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filmstrip-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.filmstrip-status-dot.is-done {
  background: var(--accent, #9aefd2);
  box-shadow: 0 0 6px rgba(154, 239, 210, 0.6);
}
.filmstrip-status-dot.is-working {
  background: #60a5fa;
  box-shadow: 0 0 6px rgba(96, 165, 250, 0.6);
  animation: pulse 1s infinite;
}
.filmstrip-status-dot.is-fail {
  background: #f87171;
}
.filmstrip-card-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: #8e8e9e;
}
.filmstrip-meta-quality {
  font-weight: 500;
  color: #a0a0b0;
}
.filmstrip-date {
  font-size: 15px;
  color: #8e8e9e;
  white-space: nowrap;
}
.video-processing-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 24px;
}
.video-spinner {
  flex-shrink: 0;
}
.video-processing-info strong {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: #e2e2ea;
  margin-bottom: 4px;
}
.video-processing-info p {
  font-size: 15px;
  color: #9da0b3;
  margin: 0;
  line-height: 1.45;
  max-width: 360px;
}
.video-failed-box {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
.video-failed-box .detail-note {
  font-size: 15px;
  color: #f87171;
  line-height: 1.45;
  margin: 0;
}
.video-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 20px;
}
.video-empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: rgba(154, 239, 210, 0.08);
  border: 1px solid rgba(154, 239, 210, 0.2);
  color: var(--accent, #9aefd2);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.video-empty-icon svg {
  width: 26px;
  height: 26px;
}
.video-empty-state h3 {
  font-size: 17px;
  font-weight: 600;
  color: #f4f4f6;
  margin: 0 0 6px;
}
.video-empty-state p {
  font-size: 15px;
  color: #9da0b3;
  max-width: 340px;
  margin: 0;
  line-height: 1.45;
}
.loader-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #9aefd2);
  animation: pulse 1s infinite ease-in-out;
  margin-right: 4px;
}

@media(max-width:900px){
  .video-workspace{grid-template-columns:1fr}
  .video-stage-frame { min-height: 320px; }
}

@media (min-width: 901px) and (min-height: 550px) {
  [data-page=videos] .page-header,
  [data-page=videos] .chat-header {
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
    min-height: 56px !important;
    padding: 12px 0 !important;
  }
  [data-page=videos] .video-workspace {
    flex: 1;
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
    overflow: hidden;
  }
  [data-page=videos] .video-workspace > section:first-child {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
    padding: 16px 18px !important;
  }
  [data-page=videos] .video-creator-panel .panel-head {
    flex-shrink: 0;
    margin-bottom: 8px;
    min-height: 28px;
  }
  [data-page=videos] .video-creator-panel .panel-head h2 {
    font-size: 17px;
  }
  [data-page=videos] #video-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 auto !important;
    min-height: 0;
  }
  [data-page=videos] #video-form .field {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  [data-page=videos] #video-form .field label,
  [data-page=videos] .video-reference-label {
    font-size: 15px;
    font-weight: 600;
  }
  [data-page=videos] #video-model {
    min-height: 38px;
    height: 38px;
    padding: 6px 10px;
    font-size: 15px;
    border-radius: 8px;
  }
  [data-page=videos] .video-reference-field {
    gap: 5px;
  }
  [data-page=videos] .video-reference-preview {
    padding: 6px 10px;
    gap: 10px;
    margin-bottom: 2px;
    border-radius: 9px;
  }
  [data-page=videos] .video-reference-preview img {
    width: 36px;
    height: 36px;
    border-radius: 6px;
  }
  [data-page=videos] .video-upload-button {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 14px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
  }
  [data-page=videos] .video-upload-note {
    font-size: 15px;
    margin: 2px 0 0 2px;
    line-height: 1.4;
    color: #9da0b3;
  }
  [data-page=videos] .video-prompt-suggestions {
    gap: 6px;
    margin-top: 4px;
  }
  [data-page=videos] .prompt-chip {
    padding: 4px 10px;
    font-size: 15px;
    border-radius: 8px !important;
  }
  [data-page=videos] .video-options {
    gap: 10px;
  }
  [data-page=videos] .video-segmented-group {
    gap: 3px;
    padding: 2px;
  }
  [data-page=videos] .video-segment-btn {
    min-height: 36px;
    height: 36px;
    font-size: 15px;
  }
  [data-page=videos] .video-specs {
    gap: 6px;
    margin: 0;
  }
  [data-page=videos] .video-spec-cell {
    padding: 6px 10px;
  }
  [data-page=videos] .video-spec-cell .spec-label {
    font-size: 15px;
  }
  [data-page=videos] .video-spec-cell strong {
    font-size: 16px;
  }
  [data-page=videos] #video-form .btn.primary {
    min-height: 44px;
    height: 44px;
    padding: 0 16px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
  }
  [data-page=videos] .video-form-note {
    font-size: 15px;
    margin: 0;
    line-height: 1.4;
  }
  [data-page=videos] .video-workspace > section:last-child {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 16px 18px;
  }
  [data-page=videos] .video-workspace > section:last-child .panel-head {
    flex-shrink: 0;
    margin-bottom: 10px;
  }
  [data-page=videos] .video-window-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}

@media (min-width: 901px) and (max-height: 820px) {
  [data-page=videos] .page-header {
    margin-bottom: 8px;
    min-height: 36px;
  }
  [data-page=videos] .video-workspace > section:first-child {
    padding: 12px 16px !important;
  }
  [data-page=videos] .video-creator-panel .panel-head {
    margin-bottom: 4px;
  }
  [data-page=videos] #video-form {
    gap: 6px;
    flex: 0 0 auto !important;
  }
  [data-page=videos] .video-specs {
    gap: 6px;
  }
  [data-page=videos] .video-spec-cell {
    padding: 4px 8px;
  }
  [data-page=videos] .video-workspace > section:last-child {
    padding: 12px 16px;
  }
}

/* 2. Chat Playground Frame & Unified Top Header */
.app-content[data-page=playground],
.app-content[data-page=images],
.app-content[data-page=videos],
.app-content[data-page=audio],
.app-content[data-page=speech] {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 24px 16px !important;
  height: calc(100dvh - var(--topbar-height)) !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.app-content[data-page=playground] .page-header.chat-header,
.app-content[data-page=images] .page-header.chat-header,
.app-content[data-page=videos] .page-header.chat-header,
.app-content[data-page=audio] .page-header.chat-header,
.app-content[data-page=speech] .page-header.chat-header,
[data-page=playground] .chat-header,
[data-page=images] .chat-header,
[data-page=videos] .chat-header,
[data-page=audio] .chat-header,
[data-page=speech] .chat-header,
.chat-header{flex-shrink:0!important;min-height:56px!important;padding:12px 0!important;margin:0!important;margin-bottom:0!important;display:flex!important;justify-content:space-between!important;align-items:center!important;border-bottom:1px solid var(--line,rgba(255,255,255,.07))!important;gap:16px!important;box-sizing:border-box!important}
.chat-header-main{display:flex;align-items:center;gap:14px;min-width:0;flex-wrap:wrap}
.chat-header-main h1{font-size:18px;font-weight: 600;letter-spacing:-.02em;color:#f4f4f6;margin:0}
.chat-header .chat-toolbar-meta{display:flex;align-items:center;gap:8px}
.app-content[data-page=playground] .page-header .header-actions,
.app-content[data-page=images] .page-header .header-actions,
.app-content[data-page=videos] .page-header .header-actions,
.app-content[data-page=audio] .page-header .header-actions,
.app-content[data-page=speech] .page-header .header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.app-content[data-page=playground] .page-header .btn.small,
.app-content[data-page=images] .page-header .btn.small,
.app-content[data-page=videos] .page-header .btn.small,
.app-content[data-page=audio] .page-header .btn.small,
.app-content[data-page=speech] .page-header .btn.small{padding:6px 12px;font-size:12px;font-weight:550;border-radius:9px;background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.1);color:#e2e2e8;transition:all .18s cubic-bezier(.16,1,.3,1)}
.app-content[data-page=playground] .page-header .btn.small:hover:not(:disabled),
.app-content[data-page=images] .page-header .btn.small:hover:not(:disabled),
.app-content[data-page=videos] .page-header .btn.small:hover:not(:disabled),
.app-content[data-page=audio] .page-header .btn.small:hover:not(:disabled),
.app-content[data-page=speech] .page-header .btn.small:hover:not(:disabled){background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff;transform:translateY(-1px)}
.app-content[data-page=playground] .page-header [data-action="clear-chat"]{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.app-content[data-page=playground] .page-header [data-action="clear-chat"]:hover:not(:disabled){background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}
.app-content[data-page=playground] .page-header .icon-btn,
.app-content[data-page=images] .page-header .icon-btn,
.app-content[data-page=videos] .page-header .icon-btn,
.app-content[data-page=audio] .page-header .icon-btn,
.app-content[data-page=speech] .page-header .icon-btn{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);color:#a4a4b0;transition:all .18s ease}
.app-content[data-page=playground] .page-header .icon-btn:hover:not(:disabled),
.app-content[data-page=images] .page-header .icon-btn:hover:not(:disabled),
.app-content[data-page=videos] .page-header .icon-btn:hover:not(:disabled),
.app-content[data-page=audio] .page-header .icon-btn:hover:not(:disabled),
.app-content[data-page=speech] .page-header .icon-btn:hover:not(:disabled){background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);color:#fff}

/* 3. Main Playground Layout & Seamless Full Workspace */
.playground-layout,
.playground-layout.chat-focused,
.app-content[data-page=playground] .playground-layout,
.app-content[data-page=images] .playground-layout,
.app-content[data-page=videos] .playground-layout,
.app-content[data-page=audio] .playground-layout,
.app-content[data-page=speech] .playground-layout,
.app-content[data-page=playground] .playground-layout.chat-focused,
.app-content[data-page=images] .playground-layout.chat-focused,
.app-content[data-page=videos] .playground-layout.chat-focused,
.app-content[data-page=audio] .playground-layout.chat-focused,
.app-content[data-page=speech] .playground-layout.chat-focused,
[data-page=playground] .playground-layout,
[data-page=images] .playground-layout,
[data-page=videos] .playground-layout,
[data-page=audio] .playground-layout,
[data-page=speech] .playground-layout {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  gap: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.settings-panel,
#chat-settings,
.chat-settings-toggle { display: none !important; }

.chat-panel,
.chat-focused .chat-panel,
.app-content[data-page=playground] .chat-panel,
.app-content[data-page=images] .chat-panel,
.app-content[data-page=videos] .chat-panel,
.app-content[data-page=audio] .chat-panel,
.app-content[data-page=speech] .chat-panel,
.app-content[data-page=playground] .chat-focused .chat-panel,
.app-content[data-page=images] .chat-focused .chat-panel,
.app-content[data-page=videos] .chat-focused .chat-panel,
.app-content[data-page=audio] .chat-focused .chat-panel,
.app-content[data-page=speech] .chat-focused .chat-panel,
[data-page=playground] .chat-panel,
[data-page=images] .chat-panel,
[data-page=videos] .chat-panel,
[data-page=audio] .chat-panel,
[data-page=speech] .chat-panel {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  overflow: hidden !important;
}

/* 4. Chat Toolbar / Header Controls & Dropdown */
.chat-focused .chat-toolbar,
.app-content[data-page=playground] .chat-focused .chat-toolbar{display:none}
.chat-model-picker{position:relative;display:inline-flex;align-items:center}
.chat-model-trigger{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;padding:6px 14px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(255,255,255,.035);color:#f4f4f6;font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;transition:all .18s cubic-bezier(.16,1,.3,1);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.chat-model-trigger:hover:not(:disabled),
.chat-model-trigger.dropdown-open{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);box-shadow:0 4px 14px rgba(0,0,0,.25)}
.chat-model-trigger:focus-visible{outline:none;border-color:var(--accent,#9aefd2);box-shadow:0 0 0 3px rgba(154,239,210,.2)}
.chat-model-trigger svg:not(.chat-model-chevron){width:15px;height:15px;color:var(--accent,#9aefd2);flex-shrink:0;filter:drop-shadow(0 0 6px rgba(154,239,210,.4))}
.chat-model-trigger .model-avatar-icon{width:16px;height:16px;object-fit:contain;flex-shrink:0}
.chat-model-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.01em}
.chat-model-chevron{width:12px;height:12px;color:var(--muted,#96969e);margin-left:2px;transition:transform .2s ease,color .2s ease;flex-shrink:0}
.chat-model-trigger:hover .chat-model-chevron,
.chat-model-trigger.dropdown-open .chat-model-chevron{color:#fff}
.chat-model-trigger.dropdown-open .chat-model-chevron{transform:rotate(180deg)}
.chat-model-dropdown{position:absolute;top:calc(100% + 8px);left:0;z-index:1200;width:340px;max-width:calc(100vw - 32px);background:#14171b;border:1px solid rgba(255,255,255,.12);border-radius:20px !important;box-shadow:0 16px 40px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.05);padding:10px;box-sizing:border-box}
.chat-model-dropdown[hidden]{display:none!important}
.chat-model-search-wrap{position:relative;display:flex;align-items:center;margin-bottom:8px;width:100%;box-sizing:border-box}
.chat-model-search-wrap .search-icon{position:absolute;left:10px;width:14px;height:14px;color:#82828e;pointer-events:none}
.chat-model-search-wrap input#playground-model-search{width:100%;min-height:38px;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:6px 10px 6px 32px;background:rgba(255,255,255,.04);color:#f4f4f6;font:inherit;font-size:15px;outline:none;transition:all .18s ease;box-sizing:border-box}
.chat-model-search-wrap input#playground-model-search:focus{border-color:var(--accent,#9aefd2)!important;box-shadow:0 0 0 2px rgba(154,239,210,.15)!important;background:rgba(255,255,255,.06)}

.chat-toolbar-meta{display:flex;align-items:center;gap:8px;flex-shrink:0}
.chat-header .pill,
.chat-toolbar .pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-family:var(--font);font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.01em;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:#a0a0ac}
.chat-header .pill-vision,
.chat-toolbar .pill-vision{color:#b8b8c5;background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.07)}
.chat-header .pill-vision svg,
.chat-toolbar .pill-vision svg{width:13px;height:13px;color:var(--muted)}
#chat-availability::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
#chat-availability.available{background:rgba(16,185,129,.08)!important;border-color:rgba(16,185,129,.25)!important;color:#9aefd2!important}
#chat-availability.available::before{background:#10b981;box-shadow:0 0 8px rgba(16,185,129,.7)}
#chat-availability.unavailable{background:rgba(239,68,68,.08)!important;border-color:rgba(239,68,68,.25)!important;color:#fca5a5!important}
#chat-availability.unavailable::before{background:#ef4444;box-shadow:0 0 8px rgba(239,68,68,.6)}

/* 5. Chat Messages Stream */
.chat-messages,
.chat-focused .chat-messages,
.app-content[data-page=playground] .chat-messages,
.app-content[data-page=images] .chat-messages,
.app-content[data-page=videos] .chat-messages,
.app-content[data-page=playground] .chat-focused .chat-messages,
.app-content[data-page=images] .chat-focused .chat-messages,
.app-content[data-page=videos] .chat-focused .chat-messages,
.app-content[data-page=audio] .chat-focused .chat-messages,
.image-chat-messages,
.video-chat-messages,
.audio-chat-messages {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  min-height: 0 !important;
  padding: 24px clamp(12px, 3vw, 32px) !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .12) transparent;
}
.chat-focused .chat-messages::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-focused .chat-messages::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-focused .chat-messages::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 6px; }
.chat-focused .chat-messages::-webkit-scrollbar-thumb:hover,
.chat-messages::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .22); }

/* 6. Welcome State */
.chat-welcome{height:100%;min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 16px}
.welcome-orb,
.chat-welcome .welcome-orb{width:58px!important;height:58px!important;border-radius:18px!important;display:grid!important;place-items:center!important;background:radial-gradient(circle at 35% 30%,rgba(154,239,210,.18),rgba(255,255,255,.02) 80%)!important;border:1px solid rgba(154,239,210,.28)!important;box-shadow:0 0 36px rgba(154,239,210,.12),inset 0 1px 0 rgba(255,255,255,.2)!important;margin-bottom:18px!important;transition:transform .3s ease,box-shadow .3s ease}
.welcome-orb:hover{transform:scale(1.05);box-shadow:0 0 44px rgba(154,239,210,.22),inset 0 1px 0 rgba(255,255,255,.3)!important}
.welcome-orb svg,
.chat-welcome .icon{width:26px;height:26px;color:var(--accent,#9aefd2);filter:drop-shadow(0 0 8px rgba(154,239,210,.4))}
.chat-focused .chat-welcome h2{font-size:26px;font-weight: 550;letter-spacing:-.025em;color:#f4f4f6;margin-bottom:8px}
.chat-welcome-sub{font-size:14px;color:var(--muted,#96969e);line-height:1.6;max-width:440px;margin:0 auto 24px}
.chat-focused .suggestions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:820px;margin-top:16px}
.chat-focused .suggestions button{display:inline-flex;align-items:center;gap:9px;padding:10px 20px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.08);border-radius:999px !important;color:#d0d0d8;font-size:13.5px;font-weight:500;line-height:1.4;cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);text-align:left}
.chat-focused .suggestions button svg{width:14px;height:14px;color:var(--accent,#9aefd2);opacity:.85;transition:transform .2s ease,opacity .2s ease;flex-shrink:0}
.chat-focused .suggestions button:hover{background:rgba(255,255,255,.06);border-color:rgba(154,239,210,.35);color:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.32)}
.chat-focused .suggestions button:hover svg{transform:translate(2px,-2px);opacity:1}

/* 7. Message Items */
.chat-focused .message,
.chat-panel .message {
  width: 100% !important;
  max-width: 840px !important;
  margin-inline: auto !important;
  margin-bottom: 24px !important;
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}
.chat-focused .message.user,
.chat-panel .message.user {
  flex-direction: row-reverse !important;
}
.chat-focused .message:not(.user),
.chat-panel .message:not(.user) {
  flex-direction: row !important;
}
.message-avatar{width:32px;height:32px;min-width:32px;flex-shrink:0;display:grid;place-items:center;border-radius:10px;font-size:10.5px;font-weight: 600;letter-spacing:.5px}
.message.user .message-avatar{border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.18);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.message:not(.user) .message-avatar{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:#fff;box-shadow:none}
.message-avatar svg{width:17px;height:17px}
.model-avatar-icon{width:18px;height:18px;object-fit:contain;display:block}
.avatar svg,.avatar .icon{fill:currentColor!important;stroke:none!important;width:17px!important;height:17px!important}
.message-body{min-width:0!important;max-width:100%!important;flex:1 1 auto!important;box-sizing:border-box!important}
.chat-focused .message.user .message-body,
.chat-panel .message.user .message-body{display:flex!important;flex-direction:column!important;align-items:flex-end!important;text-align:right!important}
.chat-focused .message:not(.user) .message-body,
.chat-panel .message:not(.user) .message-body{display:flex!important;flex-direction:column!important;align-items:flex-start!important;text-align:left!important;width:100%!important;min-width:0!important;max-width:100%!important;overflow:hidden!important}
.message-label{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.chat-focused .message.user .message-label{justify-content:flex-end;text-align:right}
.chat-focused .message:not(.user) .message-label{justify-content:flex-start;text-align:left}
.message-label strong{font-weight:500;font-size:13.5px;color:#f0f0f4;letter-spacing:-.01em}
.message.error .message-label span, .message-label span.error-badge{font-size:11px;padding:2px 7px;border-radius:4px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);color:#fca5a5}
.message-label .pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;padding:3px 9px;border-radius:6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);color:#9da0b3}
.message-label .pill.status-working{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#eaeaec}
.message-label .pill.status-ok{background:rgba(73,214,158,.1);border-color:rgba(73,214,158,.25);color:#9aefd2}
.message-label .pill.status-warn{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09);color:#a0a0ac}
.chat-panel .message-text{overflow-wrap:anywhere;word-break:break-word;min-width:0!important;max-width:100%!important;box-sizing:border-box!important}

/* User Message Bubble */
.chat-focused .message.user .message-text{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:14px;border-top-right-radius:3px;border-top-left-radius:14px;padding:12px 18px;color:#f4f4f6;font-size:14.5px;line-height:1.65;display:inline-block;max-width:85%;white-space:pre-wrap;text-align:left}
.chat-focused .message.user .chat-photos{justify-content:flex-end}

/* Assistant Message Typography */
.chat-focused .message:not(.user) .message-text,
.chat-panel .message:not(.user) .message-text{font-size:14.5px;line-height:1.75;color:#d6d6de;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
.chat-panel .message-text pre{overflow-x:auto!important;max-width:100%!important;box-sizing:border-box!important}

/* Code Blocks in Messages */
.answer-code{white-space:normal;overflow:hidden!important;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:#08090b;margin:16px 0;box-shadow:0 4px 20px rgba(0,0,0,.35);width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
.answer-code>div{display:flex;align-items:center;justify-content:space-between;padding:7px 14px;border-bottom:1px solid rgba(255,255,255,.07);font-family:var(--mono);font-size:11.5px;color:#9a9aa6;background:rgba(255,255,255,.03);box-sizing:border-box}
.answer-code>div span{text-transform:uppercase;letter-spacing:.5px;font-size:11px;color:var(--accent,#9aefd2)}
.answer-code>div .icon-btn{width:auto;height:auto;padding:4px 8px;border-radius:6px;font-size:11px;color:#a0a0ab;background:transparent;border:1px solid transparent;transition:all .15s ease}
.answer-code>div .icon-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#fff}
.answer-code pre{margin:0;padding:16px 18px;overflow-x:auto!important;line-height:1.7;white-space:pre!important;font-family:var(--mono);font-size:12.5px;color:#e4e4e7;scrollbar-width:thin;width:100%!important;max-width:100%!important;box-sizing:border-box!important}
.answer-code code{font-family:inherit;white-space:inherit}
.message-text code:not(pre code){font-family:var(--mono);font-size:12.5px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);border-radius:5px;padding:2px 6px;color:var(--accent,#9aefd2)}
.message-text h1,.message-text h2,.message-text h3,.message-text h4,.message-text h5,.message-text h6{font-weight:600;letter-spacing:-.02em;color:#f4f4f6;margin:18px 0 8px;line-height:1.45}
.message-text h1{font-size:20px}
.message-text h2{font-size:18px}
.message-text h3{font-size:16.5px}
.message-text h4{font-size:15.5px}
.message-text h5,.message-text h6{font-size:14.5px}
.message-text strong{font-weight:600}
.message-text em{font-style:italic}
.message-text del{text-decoration:line-through;opacity:.7}
.message-text a,.message-link{color:var(--accent,#9aefd2);text-decoration:underline;text-underline-offset:3px;font-weight:500;word-break:break-all;transition:color .15s ease}
.message-text a:hover,.message-link:hover{color:#bbf8e2}
.answer-bullet{display:flex;gap:10px;white-space:normal;margin:6px 0;align-items:flex-start}
.answer-bullet>span:first-child{flex-shrink:0}
.answer-ordered-item{display:flex;gap:8px;white-space:normal;margin:6px 0;align-items:flex-start}
.answer-ordered-item>span:first-child{flex-shrink:0;min-width:18px;font-variant-numeric:tabular-nums;color:var(--muted,#96969e);font-weight:500}
.answer-quote{margin:12px 0;padding:8px 14px;border-left:3px solid var(--accent,#9aefd2);background:rgba(255,255,255,.03);border-radius:0 6px 6px 0;color:#cfd0d8;font-style:italic}

/* Light Theme overrides for message Markdown */
html.theme-light .message-text h1,
html.theme-light .message-text h2,
html.theme-light .message-text h3,
html.theme-light .message-text h4,
html.theme-light .message-text h5,
html.theme-light .message-text h6,
[data-theme="light"] .message-text h1,
[data-theme="light"] .message-text h2,
[data-theme="light"] .message-text h3,
[data-theme="light"] .message-text h4,
[data-theme="light"] .message-text h5,
[data-theme="light"] .message-text h6{color:#11141a!important;font-weight:600!important}
html.theme-light .message-text strong,
[data-theme="light"] .message-text strong{color:#11141a!important;font-weight:600!important}
html.theme-light .message-text em,
[data-theme="light"] .message-text em{color:inherit!important;font-style:italic!important}
html.theme-light .message-text code:not(pre code),
[data-theme="light"] .message-text code:not(pre code){background:#f0f2f6!important;border:1px solid #d5d9e0!important;color:#11141a!important;font-weight:500!important}
html.theme-light .message-text a,
html.theme-light .message-link,
[data-theme="light"] .message-text a,
[data-theme="light"] .message-link{color:#111827!important;text-decoration:underline!important;text-underline-offset:3px!important;font-weight:500!important}
html.theme-light .message-text a:hover,
html.theme-light .message-link:hover,
[data-theme="light"] .message-text a:hover,
[data-theme="light"] .message-link:hover{color:#000000!important}
html.theme-light .answer-bullet,
[data-theme="light"] .answer-bullet{color:#1e2128!important}
html.theme-light .answer-bullet>span:first-child,
[data-theme="light"] .answer-bullet>span:first-child{color:#555b6a!important;font-weight: 600!important}
html.theme-light .answer-ordered-item,
[data-theme="light"] .answer-ordered-item{color:#1e2128!important}
html.theme-light .answer-ordered-item>span:first-child,
[data-theme="light"] .answer-ordered-item>span:first-child{color:#555b6a!important;font-weight:600!important}
html.theme-light .answer-quote,
[data-theme="light"] .answer-quote{background:#f4f5f8!important;border-left-color:#374151!important;color:#333742!important}

/* Message Actions & Meta Row */
.message-meta-row{display:inline-flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.message-meta-row .btn.small.subtle,
.message-meta-row .message-copy,
.message-meta-row .message-check-billing,
.message-meta-row .chat-usage{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px;margin:0!important;height:30px!important;min-height:30px!important;max-height:30px!important;padding:0 10px!important;box-sizing:border-box!important;font-size:13px!important;font-weight:500!important;line-height:1!important;border-radius:6px!important;white-space:nowrap!important;text-decoration:none!important;vertical-align:middle}
.message-meta-row .message-copy,
.message-meta-row .message-check-billing{background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.08)!important;color:#8f8f9c!important;cursor:pointer;transition:all .15s ease}
.message-meta-row .message-copy:hover,
.message-meta-row .message-check-billing:hover{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.18)!important;color:#fff!important}
.message-meta-row .message-copy .icon{width:13px;height:13px;flex-shrink:0}
.message-meta-row .chat-usage{font-family:var(--mono);font-size:12px!important;color:#787884;background:rgba(255,255,255,.02)!important;border:1px solid rgba(255,255,255,.06)!important;cursor:default}
.message-error{padding:12px 14px;border-left:3px solid #ef4444;background:rgba(239,68,68,.08);border-radius:0 10px 10px 0;color:#fca5a5;font-size:13px;line-height:1.6;margin:12px 0}
@keyframes statusFadeIn{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}
.chat-status-indicator{display:inline-block;font-size:14px;line-height:1.7;color:var(--text,#e2e2ea);margin:2px 0 4px;font-weight:400;user-select:none;animation:statusFadeIn .2s ease-out}
.chat-status-indicator .status-orb{display:none!important}
.chat-status-indicator .chat-status-text{color:var(--text,#e2e2ea);opacity:.88;letter-spacing:.01em}
[data-theme="light"] .chat-status-indicator,
[data-theme="light"] .chat-status-indicator .chat-status-text{color:#11141a!important;opacity:.9}
.stream-cursor:after{content:'▋';font-size:12px;color:var(--text,#e2e2ea);animation:pulse .8s infinite;margin-left:3px;vertical-align:baseline;display:inline-block}
[data-theme="light"] .stream-cursor:after{color:#11141a!important}
.stream-dots:after{display:none!important}

/* 8. Composer Island - Gemini Format in Tokvian Style */
.chat-focused .composer,
.chat-panel .composer,
.app-content[data-page=playground] .chat-focused .composer,
.app-content[data-page=playground] .composer,
.app-content[data-page=images] .composer,
.app-content[data-page=videos] .composer,
.app-content[data-page=audio] .composer,
.image-composer,
.video-composer,
.audio-composer {
  flex-shrink: 0 !important;
  width: 100% !important;
  max-width: 840px !important;
  margin: 0 auto 16px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  box-sizing: border-box !important;
}
.composer-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 7px 12px;
  background: rgba(20,23,28,.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px !important;
  box-shadow: 0 10px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .18s, box-shadow .18s, background .18s;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 52px !important;
}
.composer-bar:focus-within{border-color:rgba(154,239,210,.45)!important;box-shadow:0 0 0 3px rgba(154,239,210,.1),0 14px 44px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)!important}
.composer-attach-btn{display:inline-flex;align-items:center;gap:6px;padding:0 !important;width:36px !important;height:36px !important;min-width:36px !important;min-height:36px !important;border-radius:50% !important;justify-content:center !important;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#cfd0d8;font:inherit;font-size:15px !important;font-weight:550;cursor:pointer;flex-shrink:0;transition:all .18s ease}
.composer-attach-btn span{display:none !important;}
.composer-attach-btn:hover:not(:disabled){background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff;transform:scale(1.02)}
.composer-attach-btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.composer-attach-btn svg{width:15px;height:15px;color:var(--accent,#9aefd2)}
.composer-web-btn{font-size:13px;padding:6px 11px}
.composer-web-btn.active{background:rgba(154,239,210,.16)!important;border-color:rgba(154,239,210,.48)!important;color:var(--accent,#9aefd2)!important;box-shadow:0 0 14px rgba(154,239,210,.25)!important}
.composer textarea,
.composer-bar textarea,
.composer-bar #prompt,
.composer-bar #image-prompt,
.composer-bar #video-prompt {
  flex: 1 1 auto !important;
  min-height: 36px !important;
  max-height: 160px !important;
  overflow-y: auto !important;
  resize: none !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #f4f4f6 !important;
  font-family: var(--font) !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  padding: 7px 8px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  scrollbar-width: thin !important;
}
.composer textarea::placeholder{color:#6c6d7a}

.chat-focused .send-btn,
.composer-bar .send-btn{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;border-radius: 50% !important;padding:0!important;display:grid!important;place-items:center!important;flex-shrink:0;background:var(--accent,#9aefd2)!important;border:1px solid #bbf8e2!important;color:#082119!important;box-shadow:0 2px 10px rgba(154,239,210,.3)!important;font-size:13px!important;font-weight: 600!important;transition:transform .15s cubic-bezier(.16,1,.3,1),box-shadow .15s ease,opacity .15s ease;cursor:pointer}
.chat-focused .send-btn:hover:not(:disabled),
.composer-bar .send-btn:hover:not(:disabled){transform:scale(1.05);background:#bbf8e2!important;box-shadow:0 0 20px rgba(154,239,210,.55)!important}
.chat-focused .send-btn[aria-label="Остановить чтение"]{background:rgba(239,68,68,.18)!important;border:1px solid rgba(239,68,68,.45)!important;color:#fca5a5!important;box-shadow:0 0 16px rgba(239,68,68,.25)!important}
.chat-focused .send-btn[aria-label="Остановить чтение"]:hover{background:rgba(239,68,68,.3)!important;border-color:rgba(239,68,68,.65)!important;color:#fff!important;box-shadow:0 0 24px rgba(239,68,68,.4)!important;transform:scale(1.05)}
.chat-focused .send-btn:disabled{opacity:.28!important;transform:none!important;box-shadow:none!important;background:rgba(255,255,255,.08)!important;color:#777!important;border-color:transparent!important;cursor:not-allowed}
.chat-focused .send-btn svg{width:16px;height:16px;stroke-width:2.2}

.composer-sub-row{display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:11.5px;color:var(--muted,#858590);gap:12px}
.composer-sub-row:not(:has(#vision-clear:not([hidden]))) .composer-foot{margin-inline:auto}
.composer-sub-row button{border:0;padding:2px 0;background:none;color:var(--muted,#858590);font-size:11.5px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.composer-sub-row button:hover{color:#fff}
.composer-shortcuts,
.chat-focused .composer-shortcuts{display:none!important}
#chat-history-status:empty{display:none!important}
.chat-focused #chat-history-status{margin:4px 0 0;font-size:11.5px;color:#787884;min-height:0}
.composer-foot,
.chat-focused .composer-foot{display:flex;justify-content:flex-end;gap:12px;font-size:12px;padding:0}
.composer-foot button{border:0;padding:0;background:none;color:var(--accent,#9aefd2);font-size:12px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.chat-access{font-size:15px!important;color:#fca5a5!important;margin-bottom:6px}
.chat-access a{color:var(--accent,#9aefd2);text-decoration:underline}

/* 9. Model Selection Dropdown List */
#chat-model-list{display:flex;flex-direction:column;gap:8px;max-height:380px;overflow-y:auto;overflow-x:hidden;margin:0;padding:0;width:100%;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent}
.chat-model-group{display:flex;flex-direction:column;gap:4px;width:100%;box-sizing:border-box}
.chat-model-group:not(:first-child){margin-top:4px;padding-top:8px;border-top:1px solid rgba(255,255,255,.08)}
.chat-model-group-title{display:flex;align-items:center;gap:8px;padding:2px 4px 4px;font-size:15px;font-weight: 600;color:#9da0b3;letter-spacing:.03em;text-transform:uppercase}
.chat-model-group-title .vendor-logo{display:inline-flex;align-items:center;justify-content:center}
.chat-model-group-title .vendor-logo-img{width:16px;height:16px;border-radius:3px}
.chat-model-group-items{display:flex;flex-direction:column;gap:4px;width:100%;box-sizing:border-box}
.chat-model-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:9px 12px;border:1px solid transparent;border-radius:8px;background:transparent;color:inherit;text-align:left;cursor:pointer;font:inherit;transition:all .15s ease;box-sizing:border-box}
.chat-model-option:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08)}
.chat-model-option.selected{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}
.chat-model-option:focus-visible{outline:none;border-color:var(--accent,#9aefd2);box-shadow:0 0 0 2px rgba(154,239,210,.25)}
.chat-model-option strong{display:block;font-size:15px;font-weight:500;color:#f4f4f6;overflow-wrap:anywhere}
.chat-model-option small{display:block;color:var(--muted,#9da0b3);font-size:15px;margin-top:2px}
.chat-model-option-name-row{display:flex;align-items:center;gap:8px}
.chat-model-vendor-badge{font-size:15px;font-weight:500;padding:2px 6px;border-radius:4px;background:rgba(255,255,255,.06);color:#a4a4b0}
.chat-model-check{display:none!important}

/* 10. Mobile Responsiveness */
@media(max-width:650px){
  .app-content[data-page=playground]{padding:8px 12px 12px}
  .app-content[data-page=playground] .page-header.chat-header{min-height:auto;padding:8px 0;margin-bottom:6px;gap:8px;flex-wrap:wrap}
  .chat-header-main{gap:8px}
  .chat-header-main h1{font-size:16px}
  .chat-model-trigger{padding:5px 10px;font-size:12.5px}
  .chat-model-name{max-width:130px}
  .chat-focused .chat-panel,
  .app-content[data-page=playground] .chat-focused .chat-panel{border-radius:0!important;background:transparent!important;border:none!important;box-shadow:none!important}
  .chat-focused .chat-messages,
  .app-content[data-page=playground] .chat-focused .chat-messages{padding:14px 8px}
  .chat-focused .chat-welcome h2{font-size:20px}
  .chat-focused .suggestions{gap:8px}
  .chat-focused .suggestions button{font-size:12.5px;padding:10px 18px;width:100%;justify-content:space-between;border-radius:999px !important}
  .chat-focused .composer,
  .app-content[data-page=playground] .chat-focused .composer{margin:0 auto 8px!important;padding:0!important;background:transparent!important;border:none!important}
  .composer-bar{padding:5px 6px 5px 8px;border-radius: 28px !important;gap:8px}
  .composer-attach-btn{padding:0 !important;width:36px !important;height:36px !important;border-radius:50% !important}
  .chat-focused .composer textarea,
  .composer #prompt,
  .composer #image-prompt,
  .composer #video-prompt{font-size:16px!important;min-height:38px!important;line-height:22px!important;padding:7px 8px!important}
  .chat-focused .send-btn,
  .composer-bar .send-btn{min-width:34px!important;min-height:34px!important;width:34px!important;height:34px!important;border-radius:8px !important}
  .chat-focused .message{gap:12px;margin-bottom:20px}
  .chat-focused .message.user .message-text{padding:10px 14px;font-size:14px}
  .chat-focused .message:not(.user) .message-text{font-size:14px}
  .composer-shortcuts{display:none!important}
  .vision-controls{gap:8px}
  .vision-controls>span{font-size:12px;flex:1;min-width:140px}
  #vision-preview .attachment-card img{height:56px!important;width:auto!important;max-width:120px!important;min-width:30px!important;object-fit:contain!important}
}
.answer-table{margin:12px 0;overflow-x:auto;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(20,23,28,.8);box-shadow:0 4px 16px rgba(0,0,0,.25)}
.answer-table table{width:100%;border-collapse:collapse;font-size:13.5px;text-align:left;line-height:1.5}
.answer-table th{background:rgba(255,255,255,.06);padding:9px 13px;font-weight:600;color:#cfded8;border-bottom:1px solid rgba(255,255,255,.1);white-space:nowrap}
.answer-table td{padding:9px 13px;border-bottom:1px solid rgba(255,255,255,.05);color:#e4e4e7}
.answer-table tr:last-child td{border-bottom:none}
.answer-table tr:hover td{background:rgba(255,255,255,.025)}
html.theme-light .answer-table{border-color:#e2e4e8!important;background:#fff!important;box-shadow:0 2px 8px rgba(0,0,0,.04)!important}
html.theme-light .answer-table th{background:#f4f5f8!important;color:#11141a!important;border-bottom:1px solid #e2e4e8!important}
html.theme-light .answer-table td{color:#11141a!important;border-bottom:1px solid #edf0f4!important}

/* ==================== PLAYGROUND ROLES, DOCUMENTS & VOICE INPUT ==================== */

.chat-welcome .chat-welcome-sub {
  max-width: 540px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: #9da0b3 !important;
  margin: 8px auto 16px !important;
}

.chat-role-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 14px auto 6px;
  max-width: 720px;
}

.chat-role-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 6px 16px;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #c4c4d6;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chat-role-chip:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

.chat-role-chip.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

.chat-role-chip .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.chat-role-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
}

.chat-role-trigger-btn .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

dialog.topup-dialog-modal,
dialog:has(#topup-form) {
  width: 540px !important;
  max-width: min(540px, calc(100vw - 32px)) !important;
  padding: 26px 28px !important;
  box-sizing: border-box !important;
}

dialog.role-dialog-modal,
dialog:has(.role-presets-modal-grid) {
  width: 760px !important;
  max-width: min(760px, calc(100vw - 32px)) !important;
  padding: 26px 28px !important;
  box-sizing: border-box !important;
}

dialog.role-dialog-modal .modal-head {
  margin-bottom: 10px;
}

dialog.role-dialog-modal .modal-intro {
  font-size: 15px;
  color: #9da0b3;
  line-height: 1.5;
  margin: 0 0 16px;
}

.role-presets-modal-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.role-presets-modal-grid .role-preset-card {
  grid-column: span 2;
}

.role-presets-modal-grid .role-preset-card:nth-child(4),
.role-presets-modal-grid .role-preset-card:nth-child(5) {
  grid-column: span 3;
}

.role-presets-modal-grid-unused {
  display: grid;
  /* unused */
  gap: 10px;
  margin-bottom: 18px;
}

.role-preset-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: #f4f4f6;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.role-preset-card:hover {
  background: rgba(255, 255, 255, 0.07);
}

.role-preset-card.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
}

.role-preset-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

.role-preset-card-head .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.role-preset-card-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: #9da0b3;
}

.role-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.role-modal-form .field {
  margin-bottom: 0;
}

.role-modal-form textarea {
  width: 100%;
  min-height: 88px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: #f4f4f6;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
  font-family: inherit;
}

.role-modal-params {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.role-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

/* Document attachment chips in composer */
.doc-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  max-width: 300px;
  padding: 6px 10px 6px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: #f4f4f6;
  box-sizing: border-box;
}

.doc-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #c4c4d6;
  flex-shrink: 0;
}

.doc-chip-icon .icon {
  width: 16px;
  height: 16px;
}

.doc-chip-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.doc-chip-name {
  font-size: 15px;
  font-weight: 600;
  color: #f4f4f6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-chip-size {
  font-size: 15px;
  color: #9da0b3;
  white-space: nowrap;
}

.doc-remove-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
}

/* Collapsible attached document inside chat messages */
.chat-docs-attached {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.chat-doc-card {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  padding: 8px 12px;
}

.chat-doc-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 15px;
  color: #f4f4f6;
  list-style: none;
}

.chat-doc-summary::-webkit-details-marker {
  display: none;
}

.chat-doc-summary .icon {
  width: 16px;
  height: 16px;
  color: #9da0b3;
  flex-shrink: 0;
}

.chat-doc-title {
  font-size: 15px;
  font-weight: 600;
  color: #f4f4f6;
}

.chat-doc-meta {
  font-size: 15px;
  color: #9da0b3;
  margin-left: auto;
}

.chat-doc-body {
  margin: 10px 0 2px;
  padding: 10px 12px;
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.5;
  color: #c4c4d6;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Voice Recording Microphone Button */
.composer-mic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 38px;
  min-height: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: #c4c4d6;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.composer-mic-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.composer-mic-btn .icon {
  width: 18px;
  height: 18px;
}

.composer-mic-btn.is-recording {
  background: rgba(248, 113, 113, 0.14);
  border-color: rgba(248, 113, 113, 0.45);
  color: #f87171;
  padding: 0 12px;
}

.voice-rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f87171;
  animation: voicePulse 1.1s ease-in-out infinite;
}

.voice-rec-time {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

@keyframes voicePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.85); }
}

@media (max-width: 720px) {
  .role-presets-modal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .role-presets-modal-grid .role-preset-card,
  .role-presets-modal-grid .role-preset-card:nth-child(4) {
    grid-column: span 1;
  }
  .role-presets-modal-grid .role-preset-card:nth-child(5) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 650px) {
  dialog.topup-dialog-modal,
  dialog:has(#topup-form),
  dialog.role-dialog-modal,
  dialog:has(.role-presets-modal-grid) {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
    padding: 20px 16px !important;
  }
  .role-presets-modal-grid {
    grid-template-columns: 1fr;
  }
  .role-presets-modal-grid .role-preset-card,
  .role-presets-modal-grid .role-preset-card:nth-child(4),
  .role-presets-modal-grid .role-preset-card:nth-child(5) {
    grid-column: auto;
  }
  .role-modal-params {
    grid-template-columns: 1fr;
  }
  .role-modal-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
  }
  .role-modal-actions .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }
  .composer-mic-btn:not(.is-recording) {
    width: 38px;
    min-width: 38px;
    padding: 0;
  }
  dialog.topup-dialog-modal .btn-payment-method,
  dialog:has(#topup-form) .btn-payment-method {
    padding: 11px 12px !important;
    gap: 10px !important;
  }
  .chat-role-trigger-btn span {
    display: none;
  }
}

/* Light Theme Overrides (Strictly neutral per AGENTS.md) */
html.theme-light .chat-role-chip,
html.theme-light .role-preset-card,
html.theme-light .doc-attachment-chip,
html.theme-light .chat-doc-card,
html.theme-light .composer-mic-btn {
  background: #f8f9fa !important;
  border: 1px solid #d5d9e0 !important;
  color: #11141a !important;
}

html.theme-light .chat-role-chip:hover,
html.theme-light .role-preset-card:hover,
html.theme-light .composer-mic-btn:hover:not(:disabled) {
  background: #f0f2f5 !important;
  color: #11141a !important;
}

html.theme-light .chat-role-chip.active,
html.theme-light .role-preset-card.active {
  background: #f0f2f5 !important;
  border-color: #11141a !important;
  color: #11141a !important;
}

html.theme-light .role-preset-card-head,
html.theme-light .doc-chip-name,
html.theme-light .chat-doc-title,
html.theme-light .chat-doc-summary {
  color: #11141a !important;
}

html.theme-light .role-preset-card-desc,
html.theme-light .doc-chip-size,
html.theme-light .chat-doc-meta {
  color: #333742 !important;
}

html.theme-light .role-modal-form textarea,
html.theme-light .chat-doc-body {
  background: #ffffff !important;
  border: 1px solid #d5d9e0 !important;
  color: #11141a !important;
}

/* Side-by-Side Model Comparison Layout (Left = Model 1, Right = Model 2) */
.chat-messages .chat-compare-row,
.chat-focused .chat-messages .chat-compare-row,
.chat-panel .chat-compare-row {
  width: 100% !important;
  max-width: 1520px !important;
  margin-inline: auto !important;
  margin-bottom: 24px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
  box-sizing: border-box !important;
}

.chat-compare-row > .message.compare-pair,
.chat-focused .chat-compare-row > .message.compare-pair,
.chat-panel .chat-compare-row > .message.compare-pair {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 16px 18px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08)) !important;
  border-radius: 8px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.chat-compare-row > .message.compare-pair.compare-picked,
.chat-focused .chat-compare-row > .message.compare-pair.compare-picked,
.chat-panel .chat-compare-row > .message.compare-pair.compare-picked {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
}

.chat-compare-row > .message.compare-pair pre,
.chat-compare-row > .message.compare-pair .answer-code pre {
  max-height: 520px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.compare-pick-btn.active,
.compare-now-btn,
.compare-run-last-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #f4f4f6 !important;
  border-radius: 8px !important;
  font-size: 15px !important;
}

@media (max-width: 960px) {
  .chat-messages .chat-compare-row,
  .chat-focused .chat-messages .chat-compare-row,
  .chat-panel .chat-compare-row {
    grid-template-columns: 1fr !important;
  }
}

html[data-theme="light"] .chat-compare-row > .message.compare-pair,
html.theme-light .chat-compare-row > .message.compare-pair,
.theme-light .chat-compare-row > .message.compare-pair {
  background: #ffffff !important;
  border: 1px solid #dce1e8 !important;
}

html[data-theme="light"] .chat-compare-row > .message.compare-pair.compare-picked,
html.theme-light .chat-compare-row > .message.compare-pair.compare-picked,
.theme-light .chat-compare-row > .message.compare-pair.compare-picked {
  background: #f8f9fa !important;
  border-color: #11141a !important;
}

html[data-theme="light"] .compare-pick-btn.active,
html[data-theme="light"] .compare-now-btn,
html[data-theme="light"] .compare-run-last-btn,
html.theme-light .compare-pick-btn.active,
html.theme-light .compare-now-btn,
html.theme-light .compare-run-last-btn,
.theme-light .compare-pick-btn.active,
.theme-light .compare-now-btn,
.theme-light .compare-run-last-btn {
  background: #f0f2f5 !important;
  border: 1px solid #11141a !important;
  color: #11141a !important;
}

/* Compare Toggle Button & Compare Bar (Desktop + Mobile + Light Theme) */
.chat-header-main {
  flex-wrap: nowrap !important;
  gap: 10px !important;
}

.chat-compare-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 13px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #e2e2ea !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  cursor: pointer;
}

.chat-compare-toggle:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

.chat-compare-toggle.active {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #f4f4f6 !important;
}

.chat-compare-toggle svg,
#web-search-toggle svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

.chat-compare-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px 16px !important;
  flex-wrap: wrap !important;
  padding: 10px 14px !important;
  margin: 6px 0 4px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08)) !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

.chat-compare-bar-side {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.chat-compare-bar-right {
  flex: 1 1 260px !important;
}

.chat-compare-slot-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 9px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #c4c4d6 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08)) !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.chat-compare-primary-model {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 15px !important;
  color: #f4f4f6 !important;
  min-width: 0 !important;
}

.chat-compare-primary-model strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-weight: 600 !important;
}

.chat-compare-vs {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #9da0b3 !important;
  flex-shrink: 0 !important;
}

.chat-compare-bar .chat-compare-select {
  flex: 1 1 200px !important;
  max-width: 340px !important;
  min-height: 38px !important;
  padding: 6px 12px !important;
  font-size: 15px !important;
  color: #f4f4f6 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08)) !important;
  border-radius: 8px !important;
}

.chat-compare-bar .chat-compare-select option {
  background: #121417;
  color: #f4f4f6;
}

.chat-compare-bar-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
}

.chat-compare-close {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
}

@media (max-width: 800px) {
  .chat-compare-toggle {
    order: 2 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    flex: 0 0 38px !important;
    display: grid !important;
    place-items: center !important;
  }
  .chat-compare-toggle span {
    display: none !important;
  }
  .chat-compare-bar {
    padding: 10px !important;
    gap: 8px !important;
    margin: 4px 0 8px !important;
  }
  .chat-compare-bar-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .chat-compare-vs {
    display: none !important;
  }
  .chat-compare-bar-right {
    order: 3 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  .chat-compare-bar .chat-compare-select {
    max-width: none !important;
    width: 100% !important;
    min-height: 40px !important;
  }
  .chat-compare-bar-actions {
    order: 2 !important;
    margin-left: auto !important;
  }
}

html[data-theme="light"] .chat-compare-toggle,
html.theme-light .chat-compare-toggle,
.theme-light .chat-compare-toggle {
  background: #ffffff !important;
  border: 1px solid #dce1e8 !important;
  color: #11141a !important;
}

html[data-theme="light"] .chat-compare-toggle.active,
html.theme-light .chat-compare-toggle.active,
.theme-light .chat-compare-toggle.active {
  background: #f0f2f5 !important;
  border-color: #11141a !important;
  color: #11141a !important;
}

html[data-theme="light"] .chat-compare-bar,
html.theme-light .chat-compare-bar,
.theme-light .chat-compare-bar {
  background: #f8f9fa !important;
  border: 1px solid #dce1e8 !important;
}

html[data-theme="light"] .chat-compare-slot-tag,
html[data-theme="light"] .chat-compare-bar .chat-compare-select,
html.theme-light .chat-compare-slot-tag,
html.theme-light .chat-compare-bar .chat-compare-select,
.theme-light .chat-compare-slot-tag,
.theme-light .chat-compare-bar .chat-compare-select {
  background: #ffffff !important;
  border: 1px solid #dce1e8 !important;
  color: #11141a !important;
}

html[data-theme="light"] .chat-compare-bar .chat-compare-select option,
html.theme-light .chat-compare-bar .chat-compare-select option,
.theme-light .chat-compare-bar .chat-compare-select option {
  background: #ffffff;
  color: #11141a;
}

html[data-theme="light"] .chat-compare-primary-model,
html.theme-light .chat-compare-primary-model,
.theme-light .chat-compare-primary-model {
  color: #11141a !important;
}