/* ════════════════════════════════════════════════════════════════
   Taim AI Lab — Professional polish layer
   Purpose: premium UX, safer previews, task/model transparency.
   Safe to load after css/ai-lab.css.
   ════════════════════════════════════════════════════════════════ */
:root {
  --taim-gold: #C89B3C;
  --taim-panel: #ffffff;
  --taim-panel-2: #fbfcfd;
  --taim-line: rgba(148, 163, 184, .28);
}
* { box-sizing: border-box; }
body { background: linear-gradient(180deg, #f8fafc 0%, #f7f6f2 100%); }
.main-header { backdrop-filter: blur(14px); background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(226,232,240,.8); }
.sidebar { box-shadow: 14px 0 32px rgba(9,28,58,.10); }
.sidebar-logo { max-height: 72px; object-fit: contain; }
.header-subtitle { color: var(--text-muted); }
.model-bar { align-items: center; gap: .65rem; flex-wrap: wrap; padding: .8rem 1rem; border-bottom: 1px solid var(--gray-200); background: linear-gradient(90deg,#fff,#fbfcfd); }
.model-chip { box-shadow: 0 1px 2px rgba(15,23,42,.04); border: 1px solid rgba(226,232,240,.9); }
.model-chip.active { box-shadow: 0 8px 22px rgba(217,108,78,.16); }
.model-cost-badge { white-space: nowrap; }

/* Messages area: must have min-height:0 so flex:1 can actually shrink it */
.messages-area { min-height: 0; }

/* Workspace strip — collapsible to save screen space */
.ai-workspace-strip { padding: 0; background: linear-gradient(180deg,#fff 0%,#f8fafc 100%); border-bottom: 1px solid var(--gray-200); flex-shrink: 0; }
.workspace-strip-toggle { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .38rem 1rem; cursor: pointer; font-size: .78rem; color: var(--text-muted); background: transparent; border: none; border-bottom: 1px solid var(--gray-100); text-align: start; transition: color .15s; }
.workspace-strip-toggle:hover { color: var(--navy); background: rgba(217,108,78,.03); }
.workspace-strip-toggle .toggle-icon { margin-inline-start: auto; transition: transform .22s ease; font-size: .7rem; }
.workspace-strip-body { padding: .75rem 1rem .2rem; }
.ai-workspace-strip.ws-collapsed .workspace-strip-body { display: none; }
.ai-workspace-strip.ws-collapsed .toggle-icon { transform: rotate(180deg); }
.task-mode-strip { display: grid; grid-template-columns: repeat(6, minmax(112px, 1fr)); gap: .62rem; }
.task-mode-card { position: relative; text-align: start; min-height: 82px; padding: .72rem .78rem; border: 1px solid var(--gray-200); border-radius: 15px; background: linear-gradient(180deg,#fff,#fbfcfd); box-shadow: 0 2px 10px rgba(15,23,42,.04); color: var(--navy); transition: all .18s ease; }
.task-mode-card:hover { transform: translateY(-1px); border-color: rgba(217,108,78,.45); box-shadow: 0 10px 26px rgba(15,23,42,.08); }
.task-mode-card.active { border-color: rgba(217,108,78,.7); background: linear-gradient(180deg,#fff7ed,#fff); box-shadow: 0 10px 26px rgba(217,108,78,.14); }
.task-mode-card .task-icon { width: 28px; height: 28px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(217,108,78,.1); color: var(--accent); margin-bottom: .34rem; }
.task-mode-card strong { display: block; font-size: .84rem; letter-spacing: -.01em; }
.task-mode-card span { display: block; color: var(--text-muted); font-size: .72rem; line-height: 1.25; margin-top: .12rem; }
body.rtl .task-mode-card { text-align: right; }

.model-detail-panel { display: grid; grid-template-columns: minmax(220px, 1.2fr) minmax(180px, .8fr) minmax(230px, 1.2fr); gap: .75rem; align-items: end; margin-top: .65rem; padding: .65rem; border: 1px solid var(--gray-200); border-radius: 14px; background: rgba(255,255,255,.86); }
.model-detail-panel label { display: block; font-size: .75rem; color: var(--text-muted); font-weight: 700; margin-bottom: .28rem; letter-spacing: .02em; }
.model-detail-panel select, .model-detail-panel input { width: 100%; min-height: 38px; border: 1px solid var(--gray-200); border-radius: 10px; padding: .45rem .58rem; background: #fff; color: var(--text); }
.model-detail-note { font-size: .78rem; line-height: 1.35; color: var(--text-muted); padding: .52rem .62rem; background: #f8fafc; border-radius: 10px; border: 1px solid var(--gray-200); }
.model-detail-note b { color: var(--navy); }

.student-safety-note, .prompt-coach-panel, .send-preview { border: 1px solid var(--gray-200); border-radius: 12px; padding: .62rem .72rem; font-size: .82rem; line-height: 1.4; margin: 0 0 .56rem; align-items: flex-start; gap: .55rem; }
.student-safety-note { display: none; background: #fffbeb; border-color: rgba(245,158,11,.45); color: #92400e; }
.prompt-coach-panel { display: none; background: #f8fafc; color: var(--gray-700); }
.prompt-coach-panel strong { color: var(--navy); }
.send-preview { display: none; background: #fff; color: var(--text-muted); justify-content: space-between; flex-wrap: wrap; }
.send-preview b { color: var(--navy); }
.coach-actions { margin-inline-start: auto; display: flex; gap: .35rem; flex-wrap: wrap; }
.mini-btn { border: 1px solid var(--gray-200); background: #fff; color: var(--navy); border-radius: 8px; padding: .28rem .5rem; font-size: .74rem; cursor: pointer; white-space: nowrap; }
.mini-btn.primary { border-color: rgba(217,108,78,.6); color: var(--accent); font-weight: 700; }

.input-area { background: rgba(255,255,255,.95); border-top: 1px solid rgba(226,232,240,.85); box-shadow: 0 -12px 34px rgba(15,23,42,.05); }
.input-wrapper-main { border-color: rgba(148,163,184,.28); box-shadow: 0 3px 14px rgba(15,23,42,.04); }
.chat-textarea { font-size: .94rem; }
.toolbar-btn, .send-btn, .hdr-btn, .lang-btn, .btn { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.toolbar-btn:hover, .send-btn:hover, .hdr-btn:hover, .btn:hover { transform: translateY(-1px); }
.message-bubble pre { overflow-x: auto; padding: .85rem; border-radius: 12px; background: #0f172a; color: #e2e8f0; }
.message-bubble code { direction: ltr; unicode-bidi: plaintext; }
.message-bubble blockquote { margin: .55rem 0; padding-inline-start: .8rem; border-inline-start: 3px solid var(--accent); color: var(--gray-600); }
.message-bubble a { color: var(--accent); text-decoration: underline; word-break: break-word; }
.message-bubble table.md-table { box-shadow: 0 1px 6px rgba(15,23,42,.04); border-radius: 10px; }
.gen-image-card .gen-image-actions { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .6rem; }
.gen-image-card .gen-image-actions a, .gen-image-card .gen-image-actions button { border: 1px solid var(--gray-200); background: #fff; border-radius: 9px; padding: .34rem .58rem; font-size: .76rem; color: var(--navy); }
.img-lightbox { position: fixed; inset: 0; background: rgba(15,23,42,.78); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; cursor: zoom-out; }
.img-lightbox img { max-width: min(96vw, 1200px); max-height: 92vh; border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.compare-grid.cols-4 { grid-template-columns: repeat(4, minmax(220px, 1fr)); }
.compare-panel.coach-panel { border-color: rgba(217,108,78,.35); background: linear-gradient(180deg,#fff7ed,#fff); }

.pro-help-panel { background: linear-gradient(135deg,#091C3A,#122850); color: #fff; border-radius: 18px; padding: 1rem; box-shadow: var(--shadow-md); }
.pro-help-panel h3 { color: #fff; font-size: 1rem; margin: 0 0 .4rem; }
.pro-help-panel p { color: rgba(255,255,255,.72); font-size: .84rem; }
.pro-stat-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: .9rem; margin-bottom: 1rem; }
.pro-stat-card { background: #fff; border: 1px solid var(--gray-200); border-radius: 16px; padding: 1rem; box-shadow: 0 2px 12px rgba(15,23,42,.04); }
.pro-stat-card .label { font-size: .76rem; color: var(--text-muted); font-weight: 700; }
.pro-stat-card .value { font-size: 1.45rem; font-weight: 800; color: var(--navy); margin-top: .2rem; }
.pro-stat-card .sub { font-size: .75rem; color: var(--text-muted); }
.status-dot { display:inline-block; width:8px; height:8px; border-radius:99px; margin-inline-end:.35rem; background:var(--success); }
.status-dot.warn { background:var(--warning); }
.status-dot.danger { background:var(--danger); }
.table-card table td, .table-card table th { vertical-align: middle; }

/* Defensive fallback: if the page is opened without ai-lab.css, it still looks usable. */
body:not(.taim-css-loaded) .app-shell { min-height: 100vh; display: grid; grid-template-columns: 280px 1fr; }
body:not(.taim-css-loaded) .sidebar { background: #091C3A; color: #fff; padding: 1rem; }
body:not(.taim-css-loaded) .main-content { min-width: 0; display: flex; flex-direction: column; }
body:not(.taim-css-loaded) .main-header { display: flex; justify-content: space-between; padding: 1rem; }
body:not(.taim-css-loaded) .chat-container { flex: 1; display: flex; flex-direction: column; }
body:not(.taim-css-loaded) .messages-area { flex: 1; padding: 1rem; overflow: auto; }
body:not(.taim-css-loaded) .input-area { padding: 1rem; }

@media (max-width: 1180px) {
  .task-mode-strip { grid-template-columns: repeat(3, 1fr); }
  .model-detail-panel { grid-template-columns: 1fr; }
  .compare-grid.cols-4 { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 760px) {
  body:not(.taim-css-loaded) .app-shell, .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; width: 100%; min-height: auto; }
  .task-mode-strip { grid-template-columns: repeat(2, 1fr); }
  .header-actions { flex-wrap: wrap; }
  .toolbar-btn span { display: none; }
  .compare-grid.cols-4 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }