/* ============================================================
   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}
.attachment-card{position:relative;margin:4px 0 8px;padding:4px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.25);transition:transform .2s,border-color .2s}
.attachment-card:hover{border-color:rgba(255,255,255,.25)}
#vision-preview .attachment-card img{display:block;width:96px;height:74px;max-width:100%;object-fit:cover;margin:0;border-radius:9px}
.attachment-card .icon-btn{position:absolute;right:-6px;top:-6px;width:24px;height:24px;background:#1b1e22;border:1px solid rgba(255,255,255,.22);border-radius:50%;color:#d1d1d8;display:grid;place-items:center;padding:0;cursor:pointer;transition:background .15s,color .15s}
.attachment-card .icon-btn:hover{background:#282c32;color:#fff;border-color:rgba(255,255,255,.4)}
.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:14px;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:12px;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)}

/* Video Workspace & Image-to-Video Studio */
.video-workspace {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1.2fr);
  gap: 22px;
  align-items: start;
}
.video-creator-panel,
.video-history-panel {
  display: flex;
  flex-direction: column;
}
.video-creator-panel {
  overflow: hidden !important;
  scrollbar-width: none !important;
}
.video-creator-panel::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
#video-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#video-form.attachment-drop {
  outline: 2px dashed var(--accent, #9aefd2) !important;
  outline-offset: -3px;
  background: rgba(154, 239, 210, 0.04) !important;
  border-radius: 12px;
}
#video-form .field {
  margin-bottom: 2px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#video-form .field label,
.video-reference-label {
  font-size: 13px;
  font-weight: 600;
  color: #cfd0d8;
  display: flex;
  align-items: center;
  gap: 8px;
}
.video-reference-label small {
  font-size: 11px;
  font-weight: 400;
  color: #7a7a88;
}
#video-model,
#video-resolution {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #f4f4f6;
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
  cursor: pointer;
  transition: all 0.18s ease;
}
#video-model:focus,
#video-resolution: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,
#video-resolution option {
  background: #14171b;
  color: #f4f4f6;
}
#video-prompt {
  width: 100%;
  min-height: 72px;
  max-height: 140px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
  color: #f4f4f6;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  transition: all 0.18s ease;
}
#video-prompt:focus {
  border-color: var(--accent, #9aefd2);
  box-shadow: 0 0 0 2px rgba(154, 239, 210, 0.15);
  background: rgba(255, 255, 255, 0.055);
}
#video-prompt::placeholder {
  color: #656573;
}

/* Reference Photo Upload & Preview */
.video-reference-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  margin-bottom: 6px;
}
.video-reference-preview img {
  width: 52px;
  height: 52px;
  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: 3px;
  min-width: 0;
  flex: 1;
}
.video-reference-meta strong {
  font-size: 12.5px;
  font-weight: 600;
  color: #f2f2f5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.video-reference-meta small {
  font-size: 11px;
  color: #848494;
}
.video-remove-ref-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
  margin-top: 4px !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: 38px;
  padding: 0 14px !important;
  border: 1.5px dashed rgba(154, 239, 210, 0.35) !important;
  border-radius: 11px;
  cursor: pointer;
  color: var(--accent, #9aefd2) !important;
  background: rgba(154, 239, 210, 0.03);
  font-size: 12.5px !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: 15px !important;
  height: 15px !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: 11px;
  color: #727282;
  margin: 3px 0 0 2px;
  line-height: 1.4;
}

/* Prompt suggestions */
.video-prompt-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.prompt-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #a4a4b2;
  font-size: 11.5px;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}
.prompt-chip:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(154, 239, 210, 0.3);
  color: #f4f4f6;
  transform: translateY(-1px);
}

/* Options & Duration */
.video-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.video-duration-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#video-duration {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #f4f4f6;
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
  box-sizing: border-box;
  transition: all 0.18s ease;
}
#video-duration: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-duration-presets {
  display: flex;
  gap: 5px;
}
.dur-preset {
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 550;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #9292a0;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s;
}
.dur-preset:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* Quote Card */
.video-quote-card {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 2px 0 6px;
}
.video-quote-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.video-quote-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent, #9aefd2);
}
.video-quote-badge svg {
  width: 12px;
  height: 12px;
}
.video-quote-rate {
  font-size: 11.5px;
  color: #888898;
  font-family: var(--mono, monospace);
}
#video-quote {
  font-size: 14.5px;
  font-weight: 700;
  color: #f4f4f6;
  margin: 2px 0;
  letter-spacing: -0.01em;
}
.video-quote-card .detail-note {
  font-size: 11.5px;
  color: #727282;
  line-height: 1.4;
  margin: 0;
}

/* Video History Cards */
.video-history-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.video-history-title-wrap .count-pill {
  font-size: 11px;
  padding: 2px 7px;
}
.video-history {
  display: grid;
  gap: 16px;
}
.video-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.video-card:hover {
  border-color: rgba(255, 255, 255, 0.14);
}
.video-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.video-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.video-model-badge {
  font-size: 13.5px;
  font-weight: 700;
  color: #f4f4f6;
  letter-spacing: -0.01em;
}
.video-meta-params {
  font-size: 12px;
  color: var(--accent, #9aefd2);
  font-weight: 550;
}
.video-id-subtle {
  font-size: 11px;
  color: #686876;
  font-family: var(--mono, monospace);
}
.video-status-wrap {
  flex-shrink: 0;
}
.video-player-frame {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.video-card video {
  width: 100%;
  max-width: 100%;
  max-height: 380px;
  display: block;
  object-fit: contain;
  border-radius: 10px;
}
.video-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.video-download-btn,
.video-copy-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.video-download-btn svg,
.video-copy-btn svg {
  width: 13px !important;
  height: 13px !important;
}
.video-processing-box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  flex-wrap: wrap;
}
.video-spinner {
  flex-shrink: 0;
}
.video-processing-info {
  flex: 1;
  min-width: 160px;
}
.video-processing-info strong {
  display: block;
  font-size: 12.5px;
  color: #e2e2e8;
  margin-bottom: 2px;
}
.video-processing-info p {
  font-size: 11.5px;
  color: #888896;
  margin: 0;
  line-height: 1.35;
}
.video-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  min-height: 240px;
}
.video-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  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: 24px;
  height: 24px;
}
.video-empty-state h3 {
  font-size: 15px;
  font-weight: 600;
  color: #f4f4f6;
  margin: 0 0 6px;
}
.video-empty-state p {
  font-size: 12.5px;
  color: #828292;
  max-width: 280px;
  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}
}

@media (min-width: 901px) and (min-height: 550px) {
  .app-content[data-page=videos] {
    height: calc(100dvh - var(--topbar-height, 64px));
    max-height: calc(100dvh - var(--topbar-height, 64px));
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 16px 28px;
    box-sizing: border-box;
  }
  [data-page=videos] .page-header {
    flex-shrink: 0;
    margin-bottom: 12px;
    min-height: 40px;
  }
  [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: hidden !important;
    scrollbar-width: none !important;
    padding: 14px 18px !important;
  }
  [data-page=videos] .video-workspace > section:first-child::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  [data-page=videos] .video-creator-panel .panel-head {
    flex-shrink: 0;
    margin-bottom: 4px;
    min-height: 24px;
  }
  [data-page=videos] .video-creator-panel .panel-head h2 {
    font-size: 15px;
  }
  [data-page=videos] #video-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-height: 0;
    justify-content: flex-start;
  }
  [data-page=videos] #video-form .field {
    margin-bottom: 0;
    gap: 2px;
  }
  [data-page=videos] #video-form .field label,
  [data-page=videos] .video-reference-label {
    font-size: 11.5px;
    font-weight: 600;
  }
  [data-page=videos] #video-model,
  [data-page=videos] #video-resolution,
  [data-page=videos] #video-duration {
    min-height: 30px;
    height: 30px;
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 7px;
  }
  [data-page=videos] .video-reference-field {
    gap: 2px;
  }
  [data-page=videos] .video-reference-preview {
    padding: 4px 8px;
    gap: 8px;
    margin-bottom: 2px;
    border-radius: 8px;
  }
  [data-page=videos] .video-reference-preview img {
    width: 32px;
    height: 32px;
    border-radius: 5px;
  }
  [data-page=videos] .video-upload-button {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    border-radius: 7px !important;
  }
  [data-page=videos] .video-upload-note {
    font-size: 10px;
    margin: 1px 0 0 2px;
    line-height: 1.2;
    color: #727282;
  }
  [data-page=videos] #video-prompt {
    min-height: 40px;
    max-height: 56px;
    height: 44px;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1.35;
    border-radius: 7px;
    resize: none;
  }
  [data-page=videos] .video-prompt-suggestions {
    gap: 3px;
    margin-top: 2px;
  }
  [data-page=videos] .prompt-chip {
    padding: 1px 6px;
    font-size: 9.5px;
    border-radius: 8px;
  }
  [data-page=videos] .video-options {
    gap: 8px;
  }
  [data-page=videos] .video-duration-wrap {
    gap: 2px;
  }
  [data-page=videos] .video-duration-presets {
    gap: 3px;
    margin-top: 1px;
  }
  [data-page=videos] .dur-preset {
    padding: 1px 5px;
    font-size: 9px;
    border-radius: 4px;
  }
  [data-page=videos] .video-quote-card {
    padding: 5px 8px;
    border-radius: 8px;
    gap: 1px;
    margin: 1px 0 2px;
  }
  [data-page=videos] .video-quote-badge {
    font-size: 9px;
  }
  [data-page=videos] .video-quote-rate {
    font-size: 10px;
  }
  [data-page=videos] #video-quote {
    font-size: 12.5px;
    margin: 1px 0;
  }
  [data-page=videos] .video-quote-card .detail-note {
    font-size: 9.5px;
    line-height: 1.2;
    margin: 0;
    color: #727282;
  }
  [data-page=videos] #video-form .btn.primary {
    min-height: 34px;
    height: 34px;
    padding: 0 12px;
    font-size: 12.5px;
    border-radius: 8px;
  }
  [data-page=videos] .video-workspace > section:last-child {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 18px 20px;
  }
  [data-page=videos] .video-workspace > section:last-child .panel-head {
    flex-shrink: 0;
    margin-bottom: 12px;
  }
  [data-page=videos] .video-history {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-right: 4px;
  }
}

/* 2. Chat Playground Frame & Unified Top Header */
.app-content[data-page=playground]{width:100%;max-width:none;margin:0;padding:0 24px 16px;height:calc(100dvh - var(--topbar-height));min-height:0;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}
.app-content[data-page=playground] .page-header.chat-header,
.chat-header{flex-shrink:0;min-height:56px;padding:12px 0;margin-bottom:0;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.07);gap:16px}
.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:700;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{display:flex;align-items:center;gap:8px;flex-shrink:0}
.app-content[data-page=playground] .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){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{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){background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);color:#fff}

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

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

/* 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:10px;background:rgba(255,255,255,.035);color:#f4f4f6;font:inherit;font-size:13.5px;font-weight:600;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-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:320px;max-width:calc(100vw - 32px);background:#14171b;border:1px solid rgba(255,255,255,.12);border-radius:14px;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}
.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:36px;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:12.5px;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:550;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-focused .chat-messages,
.app-content[data-page=playground] .chat-focused .chat-messages{flex:1;overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:24px clamp(12px,3vw,32px);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent}
.chat-focused .chat-messages::-webkit-scrollbar{width:6px}
.chat-focused .chat-messages::-webkit-scrollbar-track{background:transparent}
.chat-focused .chat-messages::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:6px}
.chat-focused .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:650;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:12px 18px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.08);border-radius:12px;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{width:100%;max-width:960px;margin-inline:auto;margin-bottom:24px;display:flex;gap:16px;align-items:flex-start}
.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:700;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(154,239,210,.08);border:1px solid rgba(154,239,210,.24);color:var(--accent,#9aefd2);box-shadow:0 0 16px rgba(154,239,210,.08)}
.message-avatar svg{width:16px;height:16px}
.message-body{min-width:0;flex:1}
.message-label{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.message-label strong{font-weight:600;font-size:13.5px;color:#f0f0f4;letter-spacing:-.01em}
.message-label span{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}
.chat-panel .message-text{overflow-wrap:anywhere;word-break:break-word}

/* User Message Bubble */
.chat-focused .message.user .message-text{background:rgba(255,255,255,.042);border:1px solid rgba(255,255,255,.085);border-radius:16px;border-top-left-radius:4px;padding:12px 18px;color:#f4f4f6;font-size:14.5px;line-height:1.65;display:inline-block;max-width:100%;white-space:pre-wrap}

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

/* Code Blocks in Messages */
.answer-code{white-space:normal;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#08090b;margin:16px 0;box-shadow:0 4px 20px rgba(0,0,0,.35)}
.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)}
.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:auto;line-height:1.7;white-space:pre;font-family:var(--mono);font-size:12.5px;color:#e4e4e7;scrollbar-width:thin}
.answer-code code{font-family: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 h3,.message-text h4,.message-text h5{font-size:16px;font-weight:600;letter-spacing:-.02em;color:#f4f4f6;margin:18px 0 8px}
.answer-bullet{display:flex;gap:10px;white-space:normal;margin:6px 0}

/* Message Actions & Meta */
.message-copy{display:inline-flex!important;align-items:center;gap:6px;margin-top:10px;padding:5px 10px!important;font-size:11.5px!important;font-weight:500;border-radius:7px;background:rgba(255,255,255,.03)!important;border:1px solid rgba(255,255,255,.08)!important;color:#8f8f9c!important;min-height:28px!important;transition:all .15s ease}
.message-copy:hover{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.18)!important;color:#fff!important}
.message-copy .icon{width:13px;height:13px}
.chat-usage{display:inline-flex;align-items:center;gap:6px;margin-top:10px;margin-left:8px;font-family:var(--mono);font-size:11px!important;color:#787884;padding:4px 9px;border-radius:6px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06)}
.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}
.stream-dots:after{content:'●';font-size:10px;color:var(--accent,#9aefd2);animation:pulse 1s infinite ease-in-out;margin-left:5px;display:inline-block}

/* 8. Composer Island - Gemini Format in Tokvian Style */
.chat-focused .composer,
.app-content[data-page=playground] .chat-focused .composer{flex-shrink:0;width:100%;max-width:860px;margin:0 auto 16px!important;padding:0!important;background:transparent!important;border:none!important;box-shadow:none!important;display:flex;flex-direction:column;gap:6px;box-sizing:border-box}
.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;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}
.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:6px 13px;height:34px;border-radius:17px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#cfd0d8;font:inherit;font-size:13px;font-weight:550;cursor:pointer;flex-shrink:0;transition:all .18s ease}
.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:14px;height:14px;color:var(--accent,#9aefd2)}
.composer textarea,
.composer-bar #prompt{flex:1;min-height:28px;max-height:160px;height:28px;overflow-y:auto;resize:none;border:0!important;outline:none!important;box-shadow:none!important;background:transparent!important;color:#f4f4f6;font-family:var(--font);font-size:14.5px;line-height:1.5;padding:3px 6px;margin:0;box-sizing:border-box;scrollbar-width:thin}
.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:700!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:13px;color:#fca5a5;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:4px;max-height:320px;overflow-y:auto;margin-top:4px;padding:2px 4px 2px 2px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent}
.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:9px;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);transform:translateX(2px)}
.chat-model-option.selected{background:rgba(154,239,210,.08);border-color:rgba(154,239,210,.3);box-shadow:inset 0 0 12px rgba(154,239,210,.05)}
.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:13px;font-weight:600;color:#f4f4f6;overflow-wrap:anywhere}
.chat-model-option small{display:block;color:var(--muted,#96969e);font-size:11px;margin-top:2px}
.chat-model-option-name-row{display:flex;align-items:center;gap:8px}
.chat-model-vendor-badge{font-size:10px;font-weight:500;padding:1px 5px;border-radius:4px;background:rgba(255,255,255,.06);color:#a4a4b0}
.chat-model-check{font-size:13px;font-weight:700;color:var(--accent,#9aefd2);flex-shrink:0}

/* 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 14px;width:100%;justify-content:space-between}
  .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:24px;gap:8px}
  .composer-attach-btn{padding:5px 9px;height:32px;font-size:12px}
  .chat-focused .composer textarea,
  .composer #prompt{font-size:16px!important;min-height:28px}
  .chat-focused .send-btn,
  .composer-bar .send-btn{min-width:34px!important;min-height:34px!important;width:34px!important;height:34px!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{width:72px;height:60px}
}