* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #0b0f19;
  color: #f1f5f9;
  min-height: 100vh;
}

/* V2 optional Managed Browser Host */
.managed-browser-card { border-color: rgba(56, 189, 248, .28); }
.managed-browser-warning { margin: 14px 0; padding: 12px 14px; border: 1px solid rgba(245, 158, 11, .35); border-radius: 9px; background: rgba(245, 158, 11, .08); color: #cbd5e1; font-size: 12px; line-height: 1.55; }
.managed-browser-controls { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr); gap: 10px 18px; align-items: center; }
.managed-toggle-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid #28364c; border-radius: 9px; background: #0c1422; cursor: pointer; }
.managed-toggle-row input { margin-top: 3px; accent-color: #38bdf8; }
.managed-toggle-row span, .managed-toggle-row small { display: block; }
.managed-toggle-row small { margin-top: 3px; color: #718096; font-size: 10px; }
.managed-browser-buttons { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.managed-browser-metrics { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 9px; margin-top: 16px; }
.managed-browser-metrics > div { padding: 11px 12px; border: 1px solid #26354b; border-radius: 8px; background: #0c1422; }
.managed-browser-metrics span, .managed-browser-metrics b { display: block; }
.managed-browser-metrics span { color: #718096; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.managed-browser-metrics b { color: #dbeafe; margin-top: 5px; font-size: 12px; }
.managed-browser-feedback { min-height: 19px; margin-top: 12px; color: #7dd3fc; font-size: 12px; }
.managed-browser-feedback.error { color: #fca5a5; }
.managed-browser-bindings { display: grid; gap: 8px; }
.managed-binding-row { display: grid; grid-template-columns: 38px minmax(220px, 1fr) auto auto; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid #28364c; border-radius: 9px; background: #0c1422; }
.managed-binding-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #25577b; border-radius: 8px; color: #38bdf8; }
.managed-binding-info b, .managed-binding-info span, .managed-binding-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.managed-binding-info span { color: #94a3b8; font-size: 11px; margin-top: 3px; }
.managed-binding-info small { color: #64748b; font-size: 10px; margin-top: 3px; }
.managed-binding-actions { display: flex; gap: 7px; }
@media (max-width: 820px) {
  .managed-browser-controls { grid-template-columns: 1fr; }
  .managed-browser-buttons { grid-column: 1; }
  .managed-browser-metrics { grid-template-columns: repeat(2, 1fr); }
  .managed-binding-row { grid-template-columns: 36px minmax(0, 1fr); }
  .managed-binding-row > .status-badge, .managed-binding-actions { grid-column: 2; justify-self: start; }
}
.app-layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 260px;
  background-color: #0f172a;
  border-right: 1px solid #1e293b;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  overflow-y: auto;
  z-index: 10;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px;
  border-bottom: 1px solid #1e293b;
}
.logo-icon { font-size: 24px; }
.logo-text h2 { font-size: 15px; font-weight: 700; color: #38bdf8; }
.badge-v1 { font-size: 10px; background: #0284c7; padding: 2px 6px; border-radius: 4px; color: #fff; }
.nav-menu { flex: 1; padding: 16px 8px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: #94a3b8;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  margin-bottom: 4px;
  transition: all 0.15s;
}
.nav-item:hover, .nav-item.active {
  background-color: #1e293b;
  color: #38bdf8;
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid #1e293b;
  font-size: 11px;
  color: #64748b;
  display: flex;
  justify-content: space-between;
}
.main-content { flex: 1; display: flex; flex-direction: column; margin-left: 260px; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid #1e293b;
  background-color: #0f172a;
  position: sticky;
  top: 0;
  z-index: 5;
}
.page-title { font-size: 18px; font-weight: 700; color: #f8fafc; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.api-endpoint-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  background: #1e293b;
  color: #38bdf8;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #334155;
}
.content-container { padding: 24px 28px; flex: 1; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.metric-card {
  background: #1e293b;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #334155;
  overflow: hidden;
  min-width: 0;
}
.metric-label { font-size: 12px; color: #94a3b8; margin-bottom: 6px; }
.metric-val {
  font-size: 22px;
  font-weight: 700;
  color: #f8fafc;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric-sub { font-size: 11px; color: #64748b; }
.text-green { color: #22c55e !important; }
.text-amber { color: #f59e0b !important; }
.text-muted { color: #64748b; font-size: 13px; }
.card {
  background: #1e293b;
  border-radius: 8px;
  border: 1px solid #334155;
  padding: 20px;
  margin-bottom: 20px;
}
.card h3 { font-size: 15px; font-weight: 700; color: #f8fafc; margin-bottom: 4px; }
.mt-4 { margin-top: 20px; }
.card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
.data-table th, .data-table td { padding: 12px 14px; border-bottom: 1px solid #334155; }
.data-table th { color: #94a3b8; font-weight: 600; }
.data-table tr:last-child td { border-bottom: none; }
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.btn {
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn + .btn { margin-left: 6px; }
.btn-primary { background: #0284c7; color: #fff; }
.btn-primary:hover { background: #0369a1; }
.btn-outline { background: transparent; border: 1px solid #475569; color: #cbd5e1; }
.btn-outline:hover { border-color: #94a3b8; color: #f1f5f9; }
.code-box {
  background: #0f172a;
  padding: 14px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #38bdf8;
  overflow-x: auto;
  margin-top: 10px;
  white-space: pre;
}
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: #94a3b8; margin-bottom: 6px; }
.form-group input,
.form-select {
  width: 100%;
  padding: 9px 12px;
  background: #0f172a;
  border: 1px solid #334155;
  color: #f8fafc;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.15s;
}
.form-group input:focus,
.form-select:focus {
  outline: none;
  border-color: #38bdf8;
}
.form-group input:disabled { opacity: 0.5; cursor: not-allowed; }
.form-select { appearance: none; cursor: pointer; }

/* ======================== MODALS ======================== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  z-index: 100;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open {
  display: flex;
}
.modal-box {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 12px;
  width: 100%;
  max-width: 500px;
  margin: 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  animation: modal-in 0.2s ease;
}
@keyframes modal-in {
  from { transform: scale(0.95) translateY(-10px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid #334155;
}
.modal-header h3 { font-size: 15px; font-weight: 700; color: #f8fafc; }
.modal-close {
  background: none;
  border: none;
  color: #64748b;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s;
}
.modal-close:hover { color: #f1f5f9; }
.modal-body { padding: 20px; }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid #334155;
}

/* ======================== API PLAYGROUND ======================== */
.playground-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
  min-height: 600px;
  background: #111827;
  border: 1px solid #1f2937;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.playground-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: #1e293b;
  border-bottom: 1px solid #334155;
}

.playground-toolbar-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.playground-select {
  padding: 8px 12px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
}

.playground-select:focus {
  border-color: #38bdf8;
}

.playground-key-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.playground-key-input {
  width: 270px;
  padding: 8px 34px 8px 12px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #38bdf8;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  outline: none;
}

.playground-key-input:focus {
  border-color: #38bdf8;
}

.playground-key-toggle {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  font-size: 14px;
}

.playground-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(34, 197, 94, 0.1);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.playground-chat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.05), transparent 40%),
              radial-gradient(circle at bottom left, rgba(14, 165, 233, 0.05), transparent 40%),
              #0f172a;
}

.playground-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
}

/* Empty State Cards */
.playground-welcome {
  margin: auto;
  max-width: 580px;
  text-align: center;
  padding: 30px 20px;
}

.playground-welcome-icon {
  width: 88px;
  height: 88px;
  margin-bottom: 12px;
  display: inline-block;
  overflow: hidden;
  border: 3px solid rgba(56, 189, 248, 0.72);
  border-radius: 50%;
  background: #0b75d1;
  box-shadow: 0 10px 30px rgba(14, 165, 233, 0.24);
  animation: float-icon 3s ease-in-out infinite;
}

.playground-welcome-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 24%;
}

@keyframes float-icon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.playground-welcome h2 {
  font-size: 20px;
  font-weight: 700;
  color: #f8fafc;
  margin-bottom: 8px;
}

.playground-welcome p {
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.playground-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.playground-chip {
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: #cbd5e1;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.playground-chip:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #38bdf8;
  transform: translateY(-1px);
}

/* Chat Message Bubbles */
.chat-msg {
  display: flex;
  gap: 12px;
  max-width: 85%;
  animation: fade-slide-up 0.25s ease forwards;
}

@keyframes fade-slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-msg.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-msg.assistant {
  align-self: flex-start;
}

.chat-avatar {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.chat-msg.user .chat-avatar {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.chat-msg.assistant .chat-avatar {
  background: linear-gradient(135deg, #0ea5e9, #10b981);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.chat-bubble {
  padding: 12px 18px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.6;
  word-break: break-word;
  position: relative;
}

.chat-msg.user .chat-bubble {
  background: #232730;
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.chat-msg.assistant .chat-bubble {
  background: rgba(30, 41, 59, 0.7);
  backdrop-filter: blur(8px);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Frameless Clean Assistant Bubble when displaying generated images (Like ChatGPT) */
.chat-msg.assistant.has-media .chat-bubble,
.chat-msg.assistant .chat-bubble.has-media {
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.chat-bubble pre {
  background: #0f172a;
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid #334155;
  overflow-x: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #38bdf8;
  margin: 8px 0;
  white-space: pre-wrap;
}

.chat-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 11px;
  color: #94a3b8;
}

.chat-copy-btn {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.15s;
}

.chat-copy-btn:hover {
  color: #38bdf8;
  background: rgba(255, 255, 255, 0.05);
}

/* ======================== CHATGPT-STYLE ACTION BAR ======================== */
.chat-action-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding-left: 2px;
  flex-wrap: wrap;
}

.chat-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: #8e9bb0;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
  position: relative;
}

.chat-action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
}

.chat-action-btn.active-like {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
}

.chat-action-btn.active-dislike {
  color: #f87171;
  background: rgba(248, 113, 113, 0.15);
}

.chat-action-btn.copied {
  color: #22c55e !important;
}

.chat-meta-tags {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  font-size: 11px;
  color: #64748b;
}

.chat-model-tag {
  color: #64748b;
  font-weight: 500;
}

.chat-latency-tag {
  color: #64748b;
}

/* Typing / Waiting Indicator */
.chat-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: rgba(30, 41, 59, 0.8);
  border: 1px dashed rgba(56, 189, 248, 0.4);
  border-radius: 12px;
  color: #38bdf8;
  font-size: 12px;
  font-weight: 500;
  align-self: flex-start;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.chat-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(56, 189, 248, 0.2);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* Composer / Input Area */
.playground-composer {
  padding: 14px 18px;
  background: #1e293b;
  border-top: 1px solid #334155;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.playground-input-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.playground-textarea {
  flex: 1;
  min-height: 48px;
  max-height: 160px;
  padding: 12px 14px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  color: #f8fafc;
  font-size: 15px;
  font-family: inherit;
  resize: none;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.playground-textarea:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.15);
}

.playground-send-btn {
  padding: 12px 20px;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.3);
  height: 48px;
}

.playground-send-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(14, 165, 233, 0.4);
}

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

.playground-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #64748b;
}

/* Raw Inspector Drawer */
.playground-raw-drawer {
  background: #0f172a;
  border-top: 1px solid #334155;
  padding: 14px 18px;
  display: none;
  max-height: 250px;
  overflow-y: auto;
  animation: modal-in 0.2s ease;
}

.playground-raw-drawer.open {
  display: block;
}

/* Attachment Button & Previews */
.playground-attach-btn {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #0f172a;
  border: 1px solid #334155;
  color: #38bdf8;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.playground-attach-btn:hover {
  background: rgba(56, 189, 248, 0.1);
  border-color: #38bdf8;
  transform: translateY(-1px);
}

.playground-attachments-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px dashed rgba(56, 189, 248, 0.3);
  border-radius: 8px;
  margin-bottom: 4px;
  align-items: center;
}

.playground-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: #1e293b;
  border: 1px solid #475569;
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 12px;
  max-width: 260px;
  animation: fade-slide-up 0.15s ease;
}

.playground-attachment-chip img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 4px;
}

.playground-attachment-chip .att-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
}

.playground-attachment-chip .att-remove {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 13px;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s;
}

.playground-attachment-chip .att-remove:hover {
  color: #ef4444;
}

/* ======================== CLEAN MODERN CHAT MEDIA UI ======================== */
/* User Attachments (Stacked cleanly on the right like ChatGPT) */
.user-attachments-grid {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 8px;
}

.user-image-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  max-width: 280px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  background: #0f172a;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.user-image-card:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

.user-image-card img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
}

/* AI Generated Image Card (Clean, Frameless, Rounded Hero — Exactly like ChatGPT) */
/* AI Generated Image Card (Clean, Frameless, Natural — Exactly like ChatGPT/Gemini) */
.ai-generated-image-card {
  position: relative;
  display: block;
  max-width: 100%;
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.ai-image-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: none !important;
  border: none !important;
  cursor: pointer;
  background: transparent !important;
  display: inline-block;
  max-width: 100%;
  width: auto;
  line-height: 0;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-image-wrap:hover {
  transform: scale(1.006);
  border: none !important;
  box-shadow: none !important;
}

.ai-image-hero {
  display: block;
  width: auto;
  max-width: min(680px, 100%);
  height: auto;
  max-height: min(760px, 82vh);
  object-fit: contain;
  border-radius: 14px;
  margin: 0;
  padding: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s ease;
}

/* Generated video: native, touch-friendly playback inside Smart AI chat. */
.ai-generated-video-card {
  width: min(680px, 100%);
  max-width: 100%;
  margin: 10px 0;
  overflow: hidden;
  border: 1px solid #2a3b52;
  border-radius: 14px;
  background: #000;
  line-height: 0;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .34);
}

.ai-generated-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(780px, 78vh);
  object-fit: contain;
  background: #000;
}

.ai-generated-video-card[data-video-orientation="portrait"] .ai-generated-video {
  max-height: min(780px, 78vh);
}

.ai-generated-video-card[data-video-orientation="landscape"] {
  width: min(680px, 100%);
}

@media (max-width: 640px) {
  .ai-generated-video-card { max-width: 100%; }
  .ai-generated-video { max-height: 68vh; }
}

/* Floating Action Button inside bottom-right corner of image - hidden for clean classic look */
.ai-image-floating-btn {
  display: none !important;
}

.chat-doc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-size: 11.5px;
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.relay-user-voice-list,
.relay-history-attachments {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  margin: 6px 0;
}

.relay-voice-message {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(330px, 72vw);
  padding: 7px 10px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(99, 102, 241, 0.2));
}

.relay-voice-message.compact {
  width: min(280px, 68vw);
  padding: 4px 7px;
}

.relay-voice-message.unavailable {
  color: #cbd5e1;
  font-size: 12px;
}

.relay-voice-icon {
  flex: 0 0 auto;
  font-size: 17px;
}

.relay-voice-message audio {
  display: block;
  min-width: 0;
  width: 100%;
  height: 36px;
  color-scheme: dark;
}

.playground-attachment-chip.voice-preview {
  padding: 3px 5px 3px 3px;
}

.playground-attachment-chip.voice-preview .att-remove {
  flex: 0 0 auto;
}

/* ======================== IMAGE LIGHTBOX MODAL ======================== */
.image-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.image-lightbox-overlay.active {
  display: flex;
  opacity: 1;
}

.image-lightbox-toolbar {
  position: absolute;
  top: 20px;
  right: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 100000;
}

.lightbox-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f1f5f9;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  backdrop-filter: blur(12px);
  transition: all 0.2s;
}

.lightbox-btn:hover {
  background: #1e293b;
  color: #38bdf8;
  border-color: #38bdf8;
  transform: translateY(-1px);
}

.lightbox-btn.close {
  font-size: 16px;
  padding: 7px 12px;
  border-radius: 50%;
}

.lightbox-btn.close:hover {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}

.image-lightbox-content {
  max-width: 92vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lightboxZoom 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.image-lightbox-content img {
  max-width: 90vw;
  max-height: 86vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85);
}

@keyframes lightboxZoom {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}


/* Remote Admin Lock Screen */
.remote-lock-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 7, 18, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 20px;
  animation: fadeInLock 0.25s ease-out;
}
@keyframes fadeInLock {
  from { opacity: 0; }
  to { opacity: 1; }
}
.remote-lock-card {
  width: 100%;
  max-width: 440px;
  background: #0f172a;
  border: 1px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(14, 165, 233, 0.15);
  border-radius: 14px;
  padding: 32px 28px;
  text-align: center;
  position: relative;
}
.remote-lock-icon {
  font-size: 38px;
  margin-bottom: 12px;
  display: inline-block;
  background: rgba(56, 189, 248, 0.1);
  padding: 12px;
  border-radius: 50%;
  border: 1px solid rgba(56, 189, 248, 0.2);
}

/* ======================== RESPONSIVE WORKSPACE SHELL v2.3 ======================== */
[hidden] {
  display: none !important;
}

body {
  overflow-x: hidden;
}

.app-layout {
  width: 100%;
  overflow: hidden;
}

.sidebar {
  width: min(86vw, 280px);
  z-index: 70;
  transform: translateX(-102%);
  visibility: hidden;
  box-shadow: 18px 0 50px rgba(0, 0, 0, 0.45);
  transition: transform 0.22s ease, visibility 0.22s;
}

body.nav-drawer-open .sidebar {
  transform: translateX(0);
  visibility: visible;
}

.logo-text {
  min-width: 0;
}

.sidebar-close-btn {
  margin-left: auto;
}

.main-content {
  width: 100vw;
  max-width: 100vw;
  flex: 0 0 100vw;
  min-width: 0;
  margin-left: 0;
}

.topbar {
  width: 100%;
  min-width: 0;
  min-height: 64px;
  padding: 12px clamp(12px, 2vw, 28px);
  z-index: 30;
}

.topbar-leading {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.page-title {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
  min-width: 0;
}

.shell-icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid #334155;
  border-radius: 7px;
  background: #111827;
  color: #cbd5e1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.shell-icon-btn:hover,
.shell-icon-btn[aria-expanded="true"] {
  background: #1e293b;
  border-color: #38bdf8;
  color: #38bdf8;
}

.panel-icon {
  width: 17px;
  height: 15px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  position: relative;
}

.panel-icon-left::before,
.panel-icon-right::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: currentColor;
  opacity: 0.85;
}

.panel-icon-left::before { left: 0; }
.panel-icon-right::after { right: 0; }

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: block;
  border: 0;
  background: rgba(2, 6, 23, 0.62);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  cursor: default;
  transition: opacity 0.2s ease, visibility 0.2s;
}

.drawer-backdrop.active {
  opacity: 1;
  visibility: visible;
}

body.workspace-drawer-open {
  overflow: hidden;
}

.content-container {
  width: 100%;
  max-width: 100vw;
  min-width: 0;
  min-height: 0;
  padding: 24px clamp(14px, 2vw, 28px);
}

.content-container.playground-mode {
  padding: 0;
  overflow: hidden;
}

.playground-container {
  width: 100%;
  max-width: 100vw;
  height: calc(100dvh - 64px);
  min-height: 0;
  border-radius: 0;
  overflow: visible;
}

/* API controls live in a hidden right drawer; all existing IDs and events stay intact. */
.playground-toolbar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  width: min(92vw, 390px);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 18px;
  padding: 0 18px 24px;
  background: #1e293b;
  border: 0;
  border-left: 1px solid #334155;
  overflow-y: auto;
  transform: translateX(102%);
  visibility: hidden;
  box-shadow: -18px 0 50px rgba(0, 0, 0, 0.45);
  transition: transform 0.22s ease, visibility 0.22s;
}

body.settings-drawer-open .playground-toolbar {
  transform: translateX(0);
  visibility: visible;
}

.settings-drawer-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -18px;
  padding: 16px 18px;
  background: #0f172a;
  border-bottom: 1px solid #334155;
}

.settings-drawer-header strong {
  display: block;
  font-size: 14px;
  color: #f8fafc;
}

.settings-drawer-header span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: #64748b;
}

.playground-toolbar-group {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  width: 100%;
}

.playground-toolbar > .playground-toolbar-group + .playground-toolbar-group {
  padding-top: 18px;
  border-top: 1px solid #334155;
}

.playground-toolbar #playgroundGeminiToolGroup {
  margin-left: 0 !important;
}

.playground-toolbar-group > div[style*="display:flex"] {
  flex-wrap: wrap;
}

.playground-select,
.playground-key-input-wrapper,
.playground-key-input {
  width: 100%;
}

.playground-chat-body {
  width: 100%;
  height: 100%;
}

.playground-container,
.playground-chat-body,
.playground-composer,
.playground-input-row,
.playground-textarea,
.playground-bottom-bar {
  min-width: 0;
  max-width: 100%;
}

.playground-messages {
  padding: clamp(16px, 3vw, 42px);
}

body.playground-active .main-content {
  height: 100dvh;
  overflow: hidden;
}

body.playground-active #tab-playground {
  height: 100%;
}

body.playground-active .content-container {
  height: auto;
  flex: 1;
}

@media (max-width: 900px) {
  .api-endpoint-badge {
    display: none;
  }

  .topbar {
    padding-left: 10px;
    padding-right: 10px;
  }

  .content-container:not(.playground-mode) {
    padding: 16px 12px;
  }

  .data-table {
    min-width: 720px;
  }

  .card {
    overflow-x: auto;
  }
}

@media (max-width: 640px) {
  .topbar {
    min-height: 58px;
  }

  .page-title {
    max-width: 38vw;
    font-size: 15px;
  }

  .top-actions {
    gap: 5px;
  }

  .top-actions .btn {
    margin-left: 0;
    padding: 7px 9px !important;
  }

  .top-actions .action-label {
    display: none;
  }

  .top-action-primary,
  #refreshBtn {
    display: none;
  }

  .shell-icon-btn {
    width: 34px;
    height: 34px;
  }

  .playground-container {
    height: calc(100dvh - 58px);
  }

  .playground-messages {
    padding: 14px 10px;
    gap: 14px;
    width: 100%;
  }

  .playground-welcome {
    width: 100%;
    min-width: 0;
    padding: 20px 8px;
    overflow: hidden;
  }

  .playground-welcome h2 {
    font-size: 18px;
  }

  .playground-welcome p {
    overflow-wrap: anywhere;
  }

  .playground-chips {
    max-width: 100%;
  }

  .playground-chip {
    max-width: 100%;
  }

  .chat-msg {
    max-width: 96%;
    gap: 8px;
  }

  .chat-avatar {
    width: 30px;
    height: 30px;
  }

  .chat-bubble {
    padding: 10px 13px;
    font-size: 13px;
  }

  .playground-composer {
    padding: 10px;
  }

  .playground-input-row {
    gap: 7px;
  }

  .playground-attach-btn,
  .playground-send-btn {
    width: 46px;
    height: 46px;
    padding: 0;
    justify-content: center;
  }

  .playground-send-btn span {
    font-size: 0;
  }

  .playground-send-btn span::before {
    content: '➤';
    font-size: 18px;
  }

  .playground-textarea {
    width: 0;
    min-height: 46px;
    padding: 11px 10px;
  }

  .playground-bottom-bar {
    display: none;
  }
}

/* ================= SMART RELAY DIRECTOR CHAT SHELL v2.5 ================= */
.relay-svg-library { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
.playground-chat-body { background:#080c13; }
.playground-messages {
  padding:24px max(24px,calc((100% - 1080px)/2));
  gap:20px;
  scrollbar-gutter:stable;
}
.chat-msg { width:fit-content; max-width:88%; align-items:flex-start; }
.chat-msg.user { width:fit-content; max-width:78%; }
.chat-msg.assistant { width:100%; max-width:100%; }
.chat-msg.assistant>.chat-avatar { display:none; }
.relay-message-card {
  width:fit-content;
  min-width:260px;
  max-width:min(820px,100%);
  padding:16px 18px 12px;
  border:1px solid #1b3555;
  border-radius:17px 17px 17px 4px;
  background:#0f1724;
  color:#e6edf7;
  overflow-wrap:anywhere;
}
.chat-msg.assistant .relay-message-card:not(.relay-error-card),
.chat-msg.has-media .relay-message-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.relay-owner-card {
  margin-left:auto;
  border-color:#26364c;
  border-radius:17px 17px 4px 17px;
  background:#142031;
}
.relay-error-card { border-color:#713a47; background:#20131b; color:#fca5a5; }
.relay-error-card .relay-message-author { color:#fb7185; }
.relay-message-author {
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:8px;
  color:#74b9fa;
  font-size:12px;
  font-weight:700;
}
.relay-owner-card .relay-message-author { color:#b7c9e0; }
.relay-message-card .chat-bubble,
.relay-message-card .chat-bubble.user,
.chat-msg.assistant.has-media .relay-message-card .chat-bubble {
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  color:inherit;
  font-size:14px;
  line-height:1.9;
}
.relay-owner-card .user-attachments-grid,
.relay-owner-card>div[style*="justify-content:flex-end"] { justify-content:flex-end; }
.relay-hidden-message-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.relay-message-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
  margin-top:13px;
  padding:7px 0 0;
  border-top:1px solid #202c3c;
}
.relay-message-actions .chat-action-btn {
  width:auto;
  min-width:29px;
  height:29px;
  padding:4px 6px;
  border:1px solid transparent;
  border-radius:5px;
  background:transparent;
  color:#9caec4;
  font-size:11px;
}
.relay-message-actions .chat-action-btn:hover { border-color:#263a54; background:#14263a; color:#74b9fa; }
.relay-message-actions .chat-action-btn svg { width:15px; height:15px; }
.relay-message-actions .relay-speech-speed { min-width:40px; }
.relay-speech-voice {
  width:auto;
  max-width:66px;
  height:29px;
  padding:2px 4px;
  border:1px solid transparent;
  border-radius:5px;
  background:transparent;
  color:#9caec4;
  font:inherit;
  font-size:11px;
  cursor:pointer;
}
.relay-speech-voice option { background:#101722; color:#d6e1ef; }
.relay-delete-shell:hover { color:#ffa5ad!important; }
.relay-message-actions .chat-meta-tags { margin-left:auto; }

/* Frameless media messages: one clean image surface, like ChatGPT/Gemini. */
.chat-msg.has-media { width: 100%; max-width: 100%; }
.chat-msg.has-media .relay-message-card {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.chat-msg.has-media .relay-message-author { display: none !important; }
.chat-msg.has-media .chat-meta { display: none !important; }

.ai-image-container {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
.relay-author-avatar {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 25px;
  width:25px;
  height:25px;
  overflow:hidden;
  border-radius:50%;
}
.relay-author-avatar.user {
  border:1px solid #36506d;
  background:#142238;
}
.relay-author-avatar.user img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 24%;
}
.relay-author-avatar.ai {
  border:1px solid rgba(56,189,248,.4);
  background:radial-gradient(circle,#15344e,#09121e);
  box-shadow:0 0 12px rgba(34,211,238,.15);
}
.relay-author-avatar.ai img {
  width:36px;
  height:36px;
  object-fit:contain;
  object-position:center top;
  transform:translateY(5px) scale(1.2);
}
.relay-provider-name { color:#74b9fa; }
.relay-header-latency {
  margin-left:2px;
  color:#7f91a8;
  font-size:10.5px;
  font-weight:600;
  white-space:nowrap;
}
.chat-msg.user.has-media .relay-message-card { margin-left:auto; }
.chat-msg.has-media .ai-generated-image-card,
.ai-image-container .ai-generated-image-card,
.chat-msg.assistant.has-media [style*="max-width:480px"] {
  width:auto!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
}
.chat-msg.has-media .ai-image-wrap,
.ai-image-container .ai-image-wrap,
.chat-msg.user.has-media .user-image-card {
  max-width:min(680px,100%)!important;
  width:auto!important;
  border:0!important;
  border-radius:14px!important;
  background:transparent!important;
  box-shadow:none!important;
  line-height:0!important;
}
.chat-msg.has-media .ai-image-wrap:hover,
.ai-image-container .ai-image-wrap:hover,
.chat-msg.user.has-media .user-image-card:hover {
  transform:scale(1.006)!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
.chat-msg.has-media .ai-image-hero,
.ai-image-container .ai-image-hero,
.chat-msg.user.has-media .user-image-card img {
  display:block!important;
  width:auto!important;
  max-width:min(680px,100%)!important;
  height:auto!important;
  max-height:min(760px,82vh)!important;
  object-fit:contain!important;
  border-radius:14px!important;
  margin:0!important;
  padding:0!important;
  box-shadow:0 4px 20px rgba(0,0,0,.35)!important;
}
.chat-msg.has-media .relay-message-actions,
.ai-image-container .relay-message-actions {
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:4px!important;
  margin-top:6px!important;
  padding:0!important;
  border-top:none!important;
  max-width:min(680px,100%)!important;
}

/* Live browser-worker notification with a real Stop action. */
.chat-loading.ai-worker-notice {
  display:grid;
  grid-template-columns:auto minmax(150px,1fr) auto auto;
  align-items:center;
  gap:10px;
  width:fit-content;
  max-width:min(620px,92%);
  padding:9px 10px;
  border:1px solid #23435f;
  border-radius:13px;
  background:linear-gradient(135deg,rgba(12,31,49,.97),rgba(11,22,36,.97));
  color:#d9ecff;
  box-shadow:0 8px 26px rgba(0,0,0,.24);
}
.ai-worker-mascot {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:34px;
  overflow:visible;
}
.ai-worker-mascot img {
  width:52px;
  height:52px;
  object-fit:contain;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));
  transform-origin:50% 85%;
  animation:aiRobotHello 1.8s ease-in-out infinite;
}
.ai-worker-copy { display:flex; flex-direction:column; min-width:0; gap:2px; }
.ai-worker-heading { display:flex; align-items:center; gap:6px; }
.ai-worker-title { color:#7dd3fc; font-size:12px; font-weight:800; }
.ai-worker-detail {
  max-width:360px;
  overflow:hidden;
  color:#89a4bd;
  font-size:10px;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ai-worker-detail[hidden] { display:none!important; }
.ai-working-dots { display:inline-flex; align-items:center; gap:3px; }
.ai-working-dots i {
  width:4px;
  height:4px;
  border-radius:50%;
  background:#38bdf8;
  animation:aiWorkingDot 1.1s ease-in-out infinite;
}
.ai-working-dots i:nth-child(2) { animation-delay:.14s; }
.ai-working-dots i:nth-child(3) { animation-delay:.28s; }
.ai-worker-timer { color:#67e8f9; font:700 10px 'JetBrains Mono',monospace; white-space:nowrap; }
.ai-worker-stop {
  height:27px;
  padding:0 9px;
  border:1px solid #7f1d1d;
  border-radius:7px;
  background:#351419;
  color:#fda4af;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}
.ai-worker-stop:hover { border-color:#ef4444; background:#52171d; color:#fff; }
.ai-worker-stop:disabled { opacity:.55; cursor:wait; }
.ai-worker-notice.error { border-color:#7f3541; background:linear-gradient(135deg,#29151d,#17121a); }
.ai-worker-notice.error .ai-worker-title { color:#fda4af; }
.ai-worker-notice.error .ai-worker-detail { color:#fecdd3; white-space:normal; }
.ai-worker-notice.stopped { border-color:#3b4b5f; background:#111923; }
.ai-worker-notice.stopped .ai-worker-title { color:#cbd5e1; }
.ai-worker-notice.stopping .ai-working-dots i { background:#fb7185; }
@keyframes aiRobotHello { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-3px) rotate(2deg)} }
@keyframes aiWorkingDot { 0%,70%,100%{opacity:.28;transform:translateY(0)} 35%{opacity:1;transform:translateY(-2px)} }

@media (max-width:640px) {
  .chat-msg.has-media { width:96%; max-width:96%; }
  .chat-msg.has-media .ai-generated-image-card,
  .chat-msg.assistant.has-media [style*="max-width:480px"],
  .chat-msg.has-media .ai-image-wrap,
  .chat-msg.user.has-media .user-image-card { max-width:86vw!important; }
  .chat-loading.ai-worker-notice { grid-template-columns:auto minmax(110px,1fr) auto; }
  .ai-worker-timer { display:none; }
  .ai-worker-detail { max-width:190px; }
}
.relay-project-progress {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:0 0 6px;
  overflow-x:auto;
  scrollbar-width:thin;
}
.relay-project-progress>button,
.relay-project-progress .relay-live-test-option>button {
  flex:1 0 110px;
  min-width:0;
  padding:7px 5px;
  border:1px solid #202c3c;
  border-radius:7px;
  background:transparent;
  color:#8797af;
  font-size:10px;
  white-space:nowrap;
  cursor:pointer;
}
.relay-project-progress button:hover { border-color:#4387bb; color:#83c2ff; }
.relay-project-progress>span:not(.relay-live-test-option) { color:#526780; font-size:12px; }
.relay-live-test-option { display:flex; align-items:center; flex:1 0 132px; gap:5px; }
.relay-live-test-option input { width:13px; height:13px; margin:0; accent-color:#38bdf8; }
.relay-live-test-option>button { width:100%; }
.playground-composer {
  width:min(1080px,calc(100% - 32px));
  margin:0 auto 8px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.relay-composer-frame {
  padding:12px 14px 10px;
  border:1px solid #2a303b;
  border-radius:15px;
  background:#10141e;
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.relay-composer-frame:focus-within { border-color:#36557a; }
.relay-composer-frame .playground-textarea {
  display:block;
  width:100%;
  min-height:48px;
  max-height:160px;
  padding:0 1px 10px;
  resize:none;
  border:0;
  outline:0;
  background:transparent;
  color:#e6edf7;
  line-height:1.7;
  font-size:13px;
}
.relay-composer-toolbar {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:8px;
  padding-top:7px;
  border-top:1px solid #202c3c;
}
.relay-composer-tools {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  flex:1 1 auto;
  min-width:0;
  max-width:100%;
  gap:5px;
}
.relay-composer-actions {
  display:flex;
  align-items:center;
  flex:0 0 auto;
  gap:6px;
}
.relay-api-key-menu { position:relative; flex:0 0 auto; }
.relay-api-key-trigger {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  height:34px;
  padding:0 11px;
  border:1px solid #2d527c;
  border-radius:7px;
  background:#111f32;
  color:#b4d8ff;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
  list-style:none;
}
.relay-api-key-trigger::-webkit-details-marker { display:none; }
.relay-api-key-trigger:hover,.relay-api-key-menu[open] .relay-api-key-trigger { border-color:#38a5ff; background:#132944; color:#e5f3ff; }
.relay-model-menu { position:relative; flex:0 0 auto; }
.relay-model-trigger {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  height:34px;
  padding:0 11px;
  border:1px solid #2a3545;
  border-radius:7px;
  background:#0c121d;
  color:#b9c8db;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
  list-style:none;
}
.relay-model-trigger::-webkit-details-marker { display:none; }
.relay-model-trigger:hover,.relay-model-menu[open] .relay-model-trigger { border-color:#38a5ff; background:#132944; color:#e5f3ff; }
.relay-api-key-panel {
  position:absolute;
  z-index:220;
  bottom:calc(100% + 12px);
  left:0;
  width:320px;
  padding:13px;
  border:1px solid #30445f;
  border-radius:12px;
  background:#0d1624;
  box-shadow:0 16px 42px rgba(0,0,0,.48);
}
.relay-api-key-panel>label { display:block; margin:0 0 6px; color:#9eb1c9; font-size:11px; font-weight:700; }
.relay-api-key-panel>label:not(:first-child) { margin-top:11px; }
.relay-api-key-panel .playground-select { width:100%; height:36px; padding:0 30px 0 10px; border:1px solid #2a3a50; border-radius:7px; background:#0a111c; color:#dce8f6; font-size:12px; }
.relay-api-key-secret { display:flex; align-items:center; width:100%; height:36px; border:1px solid #2a3a50; border-radius:7px; background:#0a111c; }
.relay-api-key-secret .playground-key-input { flex:1 1 auto; min-width:0; height:34px; padding:0 10px; border:0; background:transparent; color:#67c6ff; box-shadow:none; }
.relay-api-key-secret .playground-key-toggle { flex:0 0 36px; width:36px; height:34px; border:0; background:transparent; }
.relay-api-key-panel>small { display:block; margin-top:9px; color:#637991; font-size:10px; line-height:1.5; }
.relay-recent-chat-panel { left:-46px; width:410px; max-width:calc(100vw - 28px); max-height:min(560px,calc(100dvh - 150px)); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.relay-recent-label { display:flex; align-items:center; justify-content:space-between; margin:0 0 6px; }
.relay-recent-label:not(:first-child) { margin-top:11px; }
.relay-recent-label label { color:#9eb1c9; font-size:11px; font-weight:700; }
.relay-recent-label button { border:0; background:transparent; color:#67c6ff; font-size:10px; cursor:pointer; }
.relay-recent-label button:hover { color:#e5f3ff; }
.playground-profile-filter { border-color:#2a3a50!important; background:#0a111c!important; color:#dce8f6!important; font-weight:500!important; }
.playground-profile-filter:focus { border-color:#38bdf8!important; }
.relay-recent-chat-panel .playground-select:disabled { opacity:0.5; cursor:not-allowed; background:#060b13; color:#64748b; border-color:#1e293b; }
.relay-recent-active { margin-top:11px; padding:9px 10px; border:1px solid #234362; border-radius:8px; background:#0a1726; color:#74c8ff; font-size:11px; line-height:1.45; }
.relay-memory-toggle,.relay-api-test-toggle { display:flex!important; align-items:flex-start; gap:8px; margin-top:11px!important; color:#c6d5e7!important; cursor:pointer; line-height:1.45; }
.relay-memory-toggle input,.relay-api-test-toggle input { flex:0 0 auto; margin-top:2px; }
.relay-memory-toggle input,.relay-api-test-toggle input { accent-color:#22c55e; }
.relay-history-clear { width:100%; margin-top:9px; padding:7px 10px; border:1px solid #34445a; border-radius:7px; background:#111b29; color:#aebfd3; font-size:11px; cursor:pointer; }
.relay-history-clear:hover { border-color:#ef4444; color:#fca5a5; }
.relay-test-api-section { margin-top:11px; padding:0 10px 10px; overflow:hidden; border:1px solid #283b52; border-radius:9px; background:#0a131f; }
.relay-test-api-section:not([open]) { padding-bottom:0; }
.relay-test-api-section>summary { margin:0 -10px; padding:10px; color:#fbbf24; background:#0d1a29; font-size:11px; font-weight:700; cursor:pointer; list-style:none; }
.relay-test-api-section[open]>summary { margin-bottom:10px; border-bottom:1px solid #283b52; }
.relay-test-api-section>summary::-webkit-details-marker { display:none; }
.relay-test-api-section>label:not(.relay-api-test-toggle) { display:block; margin:10px 0 6px; color:#9eb1c9; font-size:11px; font-weight:700; }
.relay-test-api-section>small { display:block; margin-top:8px; color:#637991; font-size:10px; line-height:1.45; }
.relay-model-panel { width:230px; }
.relay-inline-config {
  display:flex;
  align-items:center;
  flex:0 0 auto;
  height:34px;
  padding-left:8px;
  border:1px solid #2a3545;
  border-radius:7px;
  background:#0c121d;
  overflow:hidden;
}
.relay-inline-config>span {
  flex:0 0 auto;
  color:#9caec4;
  font-size:10px;
  white-space:nowrap;
}
.relay-inline-config .playground-select {
  width:auto;
  min-width:0;
  height:32px;
  padding:0 27px 0 7px;
  border:0;
  border-radius:0;
  background:#0c121d;
  color:#dce8f6;
  font-size:11px;
  box-shadow:none;
}
.relay-key-template-field { width:245px; }
.relay-key-template-field .playground-select { flex:1 1 auto; }
.relay-model-field { width:238px; }
.relay-model-field .playground-select { flex:1 1 auto; }
.relay-inline-key-secret {
  flex:0 0 170px;
  width:170px;
  height:34px;
  border-color:#2a3545;
  border-radius:7px;
  background:#0c121d;
}
.relay-inline-key-secret .playground-key-input {
  width:132px;
  height:32px;
  padding:0 8px;
  border:0;
  background:transparent;
  color:#67c6ff;
  font-size:11px;
  box-shadow:none;
}
.relay-inline-key-secret .playground-key-toggle {
  width:34px;
  height:32px;
  border:0;
  background:transparent;
}
.relay-icon-button,.relay-tool-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:32px;
  border:1px solid #2a3545;
  border-radius:7px;
  background:transparent;
  color:#8797af;
  cursor:pointer;
}
.relay-icon-button { width:32px; flex:0 0 32px; padding:0; position:relative; }
.relay-icon-button svg,.relay-tool-button svg,.relay-send-button svg {
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.relay-icon-button:hover,.relay-tool-button:hover { border-color:#36557a; color:#b9d9ff; background:#111f32; }
.relay-round { border-radius:50%; border-color:#304055; background:#182333; color:#58aaf8; }
.relay-tool-button { flex:0 0 auto; gap:6px; padding:0 9px; font-size:11px; }
.relay-setup-button { border-color:#2d527c; color:#b4d8ff; background:#111f32; }
.relay-start-button { border-color:#234d38; color:#78d59a; background:#101f18; }
.relay-monitor-button { position:relative; }
.relay-connection-dot { position:absolute; right:2px; bottom:4px; width:5px; height:5px; border-radius:50%; background:#657083; }
.relay-composer-toolbar .playground-attach-btn,
.relay-composer-toolbar .playground-mic-btn {
  width:32px;
  height:32px;
  flex-basis:32px;
  border-radius:50%;
  transform:none;
}
.relay-composer-toolbar .playground-mic-btn.listening { border-color:#ef4444; background:#dc2626; color:#fff; }
.playground-mic-btn { touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.playground-mic-btn.listening { transform:scale(1.08); box-shadow:0 0 0 6px rgba(239,68,68,.18),0 0 22px rgba(239,68,68,.45); }
.relay-send-button,.relay-composer-toolbar .playground-send-btn {
  width:36px;
  height:36px;
  flex:0 0 36px;
  padding:0;
  border:1px solid #358efa;
  border-radius:50%;
  background:#2276ea;
  color:#fff;
}
.relay-send-button:hover:not(:disabled) { background:#368af9; }
.relay-send-button.stopping { background:#7f1d1d; border-color:#ef4444; }
.relay-send-button.stop-ready { background:#dc2626; border-color:#f87171; }
.playground-attachments-bar:not([style*="display:none"]) { margin:0 0 6px; border:1px solid #28364c; border-radius:10px; background:#10141e; }
.playground-voice-status {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  margin: 0 0 6px 0;
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 10px;
  color: #7dd3fc;
  font-size: 12.5px;
  line-height: 1.4;
  animation: fadeInVoice 0.2s ease forwards;
}
.playground-voice-status.active { display: flex !important; }
.playground-voice-status.error {
  display: flex !important;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(248, 113, 113, 0.4);
  color: #fca5a5;
}
.playground-voice-status .voice-live-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ef4444;
  margin-right: 6px;
  animation: microphone-pulse 1.25s infinite;
  vertical-align: middle;
}
.playground-voice-status .voice-status-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.75;
  transition: opacity 0.15s;
  line-height: 1;
}
.playground-voice-status .voice-status-close:hover { opacity: 1; }
@keyframes fadeInVoice {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}
.playground-bottom-bar { padding:6px 4px 0; color:#657083; }

@media (max-width:760px) {
  .playground-chat-body,.playground-messages,.playground-welcome { min-width:0; max-width:100%; }
  .playground-welcome { width:calc(100% - 12px); padding-left:6px; padding-right:6px; }
  .playground-welcome p { overflow-wrap:anywhere; }
  .playground-messages { padding:14px 10px; }
  .chat-msg,.chat-msg.user { max-width:97%; }
  .relay-message-card { min-width:0; padding:13px 14px 10px; }
  .playground-composer { width:calc(100% - 12px); margin:0 auto 6px; padding:0; border-radius:0; }
  .relay-composer-frame { padding:10px; border-radius:13px; }
  .relay-composer-tools { flex:1 1 0; max-width:calc(100% - 44px); flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; scrollbar-width:thin; }
  .relay-api-key-panel { position:fixed; right:auto; bottom:92px; left:18px; width:min(410px,calc(100vw - 36px)); max-height:calc(100dvh - 118px); }
  .relay-tool-button { white-space:nowrap; }
  .relay-key-template-field { width:220px; }
  .relay-model-field { width:210px; }
  .relay-inline-key-secret { flex-basis:150px; width:150px; }
  .relay-inline-key-secret .playground-key-input { width:112px; }
  .relay-message-actions .chat-meta-tags { flex-basis:100%; margin-left:0; }
  .relay-project-progress { padding-bottom:5px; }
  .playground-bottom-bar { display:none; }
  .relay-composer-toolbar .playground-attach-btn,
  .relay-composer-toolbar .playground-mic-btn { width:32px; height:32px; flex-basis:32px; }
  .relay-composer-toolbar .playground-send-btn { width:36px; height:36px; flex-basis:36px; }
}

@media (max-width:480px) {
  .relay-api-key-panel { right:10px; bottom:88px; left:10px; width:auto; }
  .relay-composer-tools > details > summary {
    width:34px;
    padding:0;
  }
  .relay-composer-tools > details > summary span { display:none; }
}

/* ======================== VOICE COMPOSER + MESSAGE SPEECH ======================== */
.settings-section-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 700;
}

.settings-section-title small {
  color: #64748b;
  font-size: 11px;
  font-weight: 500;
}

.voice-setting-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
}

.voice-toggle-row {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #cbd5e1;
  font-size: 12px;
  cursor: pointer;
}

.voice-toggle-row input {
  width: 16px;
  height: 16px;
  accent-color: #0ea5e9;
}

.voice-privacy-note {
  padding: 10px 12px;
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 8px;
  background: rgba(14, 165, 233, 0.06);
  color: #7f91aa;
  font-size: 10.5px;
  line-height: 1.55;
}

.playground-composer {
  margin: 0 clamp(10px, 2vw, 22px) 12px;
  padding: 10px 12px 8px;
  border: 1px solid #28364c;
  border-radius: 16px;
  background: #0b111c;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}

.playground-input-row {
  align-items: center;
}

.playground-textarea {
  border-color: transparent;
  background: transparent;
  padding-left: 8px;
}

.playground-textarea:focus {
  border-color: transparent;
  box-shadow: none;
}

.playground-attach-btn,
.playground-mic-btn {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #334155;
  border-radius: 50%;
  background: #111827;
  color: #94a3b8;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s;
}

.playground-attach-btn:hover,
.playground-mic-btn:hover {
  color: #38bdf8;
  border-color: #38bdf8;
  background: rgba(14, 165, 233, 0.1);
  transform: translateY(-1px);
}

.playground-mic-btn.listening {
  color: #fff;
  border-color: #ef4444;
  background: #dc2626;
  animation: microphone-pulse 1.25s ease-in-out infinite;
}

@keyframes microphone-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.35); }
  50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

.playground-send-btn {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
}

.playground-send-btn span {
  font-size: 0;
}

.playground-send-btn span::before {
  content: '➤';
  font-size: 18px;
}

.playground-voice-status {
  min-height: 0;
  color: #7dd3fc;
  font-size: 11px;
  line-height: 1.5;
}

.playground-voice-status:empty {
  display: none !important;
}

.chat-speech-status:not(:empty) {
  flex-basis: 100%;
  padding: 2px 4px 0;
  color: #94a3b8;
  font-size: 10.5px;
}

.chat-action-btn.speaking {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.14);
}

/* ======================== MOBILE & DESKTOP COMPOSER STYLING ======================== */
.playground-composer {
  width: min(1080px, calc(100% - 32px));
  margin: 0 auto 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.relay-composer-toolbar .playground-attach-btn,
.relay-composer-toolbar .playground-mic-btn {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border-radius: 50%;
}
.relay-composer-toolbar .playground-send-btn {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border-radius: 50%;
}

/* ======================== UNIVERSAL MOBILE SCREEN OPTIMIZATION ======================== */
/* Applies to all mobile browsers (iOS Safari, Android Chrome, WebViews, and PWAs) */
@media (max-width: 768px) {
  html,
  body {
    height: 100% !important;
    height: var(--app-viewport-height, 100dvh) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    -webkit-text-size-adjust: 100% !important;
  }

  body.playground-active {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: var(--app-viewport-height, 100dvh);
    max-height: var(--app-viewport-height, 100dvh);
    overflow: hidden;
  }

  .app-layout {
    height: 100% !important;
    height: var(--app-viewport-height, 100dvh) !important;
    max-height: var(--app-viewport-height, 100dvh) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .main-content {
    flex: 1 1 100% !important;
    width: 100% !important;
    height: 100% !important;
    height: var(--app-viewport-height, 100dvh) !important;
    max-height: var(--app-viewport-height, 100dvh) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  .topbar {
    flex: 0 0 auto !important;
    padding-top: max(10px, env(safe-area-inset-top)) !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    min-height: 52px !important;
    z-index: 25;
  }

  .sidebar {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .content-container.playground-mode {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #tab-playground.tab-pane.active {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .playground-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .playground-chat-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .playground-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    padding: 12px 10px !important;
  }

  /* Safe Area Bottom clearance ensures toolbar & send button are never clipped */
  .playground-composer {
    flex: 0 0 auto !important;
    width: calc(100% - 14px) !important;
    max-width: 100% !important;
    margin: 0 auto max(6px, env(safe-area-inset-bottom, 6px)) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    position: relative !important;
    z-index: 20 !important;
  }

  .relay-voice-message {
    width: min(300px, 76vw);
  }

  .relay-voice-message audio {
    height: 34px;
  }

  .relay-composer-frame {
    padding: 8px 10px !important;
    border-radius: 14px !important;
  }

  .relay-composer-tools {
    flex: 1 1 0;
    max-width: calc(100% - 84px);
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .relay-composer-tools::-webkit-scrollbar {
    display: none;
  }

  .relay-composer-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .relay-composer-toolbar .playground-attach-btn,
  .relay-composer-toolbar .playground-mic-btn {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }

  .relay-composer-toolbar .playground-send-btn {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }

  .relay-api-key-panel {
    position: fixed !important;
    right: 10px !important;
    left: 10px !important;
    bottom: max(96px, calc(env(safe-area-inset-bottom) + 86px)) !important;
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
  }

  /* Prevent iOS Auto-Zoom on form input focus: font-size must be at least 16px */
  input,
  textarea,
  select,
  .playground-textarea,
  .playground-key-input,
  .playground-select {
    font-size: 16px !important;
    touch-action: manipulation;
  }

  /* Touch stability: remove tap delay and gesture bounce */
  button,
  .relay-icon-button,
  .relay-tool-button,
  .playground-chip,
  summary {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

/* Installed PWA Standalone Mode extra polish */
@media (display-mode: standalone), (display-mode: fullscreen) {
  body {
    user-select: none;
  }
  input,
  textarea,
  select,
  pre,
  code,
  .chat-msg-content {
    user-select: text;
  }
}

/* ======================== CONTEXT HANDOVER & SWITCHER ======================== */
.relay-handover-trigger {
  border-color: rgba(99, 102, 241, 0.45) !important;
  color: #c7d2fe !important;
  background: rgba(99, 102, 241, 0.1) !important;
}

.relay-handover-trigger:hover {
  background: rgba(99, 102, 241, 0.22) !important;
  border-color: #818cf8 !important;
  color: #ffffff !important;
}

.relay-switch-handover-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.4);
  color: #a5b4fc;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.relay-switch-handover-btn:hover {
  background: rgba(99, 102, 241, 0.25);
  border-color: #818cf8;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.3);
}

.voice-status-switch-btn {
  margin-left: 10px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.voice-status-switch-btn:hover {
  background: #38bdf8;
  border-color: #38bdf8;
  color: #0b0f19;
}

.chat-system-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px 0;
  position: relative;
}

.chat-system-divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.4), transparent);
}

.chat-divider-pill {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  border: 1px solid rgba(99, 102, 241, 0.5);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 16px rgba(99, 102, 241, 0.2);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  color: #c7d2fe;
}

.chat-divider-pill b {
  color: #38bdf8;
}

.chat-divider-icon {
  font-size: 15px;
}

.chat-limit-notice {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-limit-notice span {
  font-size: 12px;
  color: #fca5a5;
  font-weight: 600;
}

.chat-limit-switch-btn {
  align-self: flex-start;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border: none;
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.chat-limit-switch-btn:hover {
  opacity: 0.9;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}