/* MILAD.VIBE theme. Existing components consume these shared design tokens. */
:root {
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px;
  --bg:#f7f5ff; --panel:#fff; --panel-soft:#faf8ff;
  --ink:#211638; --muted:#766c90; --line:#e9e3f5;
  --accent:#6d28d9; --accent-hover:#5b21b6; --accent-soft:#f0e9fc; --accent-ink:#6525ba;
  --sidebar:#241044; --sidebar-ink:#c9bbdf; --sidebar-active:#50317b;
  --button-ink:#fff; --shadow:0 4px 24px #44207906; --radius:16px;
  --preview-bg:#f2edfa; --bubble:#fff; --preview-ink:#211638;
}
html[data-theme=dark] {
  --bg:#171122; --panel:#21192e; --panel-soft:#281e38; --ink:#f0e9fc;
  --muted:#baadcf; --line:#3b2c50; --accent:#a78bfa; --accent-hover:#c4b0ff;
  --accent-soft:#38234f; --accent-ink:#c8b3ff; --sidebar:#1c0e33;
  --sidebar-ink:#c9bbdf; --sidebar-active:#493066; --button-ink:#211638;
  --preview-bg:#2a2039; --bubble:#392a4e; --preview-ink:#f0e9fc;
}
.logo {background:var(--accent);box-shadow:0 4px 14px #6d28d91c}
.logo span {background:#c4b5fd}
.brand {letter-spacing:.5px;font:750 17px/1.4 Inter,sans-serif}
.brand small {letter-spacing:.4px;font-size:10px;font-weight:400}
.sidebar {background:linear-gradient(165deg,#301652 0%,var(--sidebar) 60%,#211039 100%);padding-block-start:var(--space-4)}
.workspace-label {gap:12px;padding-block-end:var(--space-4)}
.workspace-label strong {font-size:15px;letter-spacing:.7px}
.workspace-label small {font:400 9px/1.7 Inter,sans-serif;letter-spacing:.1px;color:#bbabd3}
.workspace-mark {width:38px;height:40px;color:#e0d2ff;background:#ffffff12;border-radius:12px}
.workspace-dot,.active-dot {background:#c4b5fd}
.nav-label {color:#b6a4d1}
.nav-link {min-height:46px;border-radius:12px;font-size:13px}
.nav-link .icon {color:#b6a4d1}
.nav-link.active {background:linear-gradient(100deg,#653ca2,#4d2c78);border-color:#ba9ce733;box-shadow:0 4px 12px #13042218}
.nav-link.active .icon {color:#e1d1ff}
.sidebar-note strong {color:#e7dbf6}
.sidebar-note p {color:#bfacd6}
.sidebar-note>.icon {color:#c7adfa}
.app-header {gap:24px}
.header-search {margin-inline:auto;background:var(--panel-soft)}
.language-switch {align-items:center}
.language-switch button {min-height:36px;min-width:48px}
.language-unavailable {font:500 11px Vazirmatn,sans-serif;padding:8px;color:var(--muted);white-space:nowrap;cursor:help}
.language-switch .language-unavailable:disabled {background:transparent;color:var(--muted);box-shadow:none;opacity:.6;cursor:not-allowed}
.icon-button,.account-avatar {min-width:40px;min-height:40px}
button,.button {min-height:42px;border-radius:10px;padding:11px 16px}
button:hover,.button:hover {color:var(--button-ink)}
button.secondary:hover,.button.secondary:hover {color:var(--accent-ink);border-color:#bba1e5;background:var(--accent-soft)}
button:disabled:hover {background:var(--accent)}
input[type=checkbox] {accent-color:var(--accent)}
input:hover,select:hover,textarea:hover {border-color:#b8a6d3}
input:focus,select:focus,textarea:focus {outline:2px solid var(--accent);outline-offset:2px;box-shadow:0 0 0 4px var(--accent-soft)}
textarea:user-invalid,input:user-invalid {border-color:var(--danger)}
/* Message workspace: inline-start is the preview (right in Persian). */
.message-workspace {padding:0;overflow:hidden;margin-block-end:32px}
.workspace-heading {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 24px 20px;border-block-end:1px solid var(--line)}
.workspace-heading-title {display:flex;gap:12px;align-items:center;min-width:0}
.workspace-heading h2 {font-size:15px;margin:0;overflow-wrap:anywhere}
.workspace-heading p {font-size:12px;color:var(--muted);margin:4px 0 0}
.workspace-heading .badge {flex-shrink:0}
.message-columns {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.22fr) minmax(0,.8fr);gap:24px;padding:24px;align-items:start}
.message-columns>* {min-width:0}
.message-preview-panel {background:none;box-shadow:none;border:0;padding:0;margin:0;border-radius:0}
.panel-title {display:flex;align-items:center;gap:8px;font-size:13px;font-weight:650;margin:0 0 16px}
.panel-title>.icon {width:17px;height:17px;color:var(--accent-ink)}
.panel-subtitle {font-size:11px;color:var(--muted);margin:-6px 0 20px;line-height:1.9}
.telegram-preview {border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--preview-bg)}
.telegram-preview-header {display:flex;align-items:center;gap:10px;padding:16px;background:linear-gradient(120deg,#7540cd,#5924a9);color:#fff}
.preview-avatar {display:grid;place-items:center;width:36px;height:36px;background:#ffffff21;border:1px solid #ffffff25;border-radius:50%;flex-shrink:0}
.preview-avatar .icon {width:18px;height:18px}
.telegram-preview-header strong {font-size:12px;display:block;overflow-wrap:anywhere}
.telegram-preview-header small {display:block;font-size:10px;color:#e3d3fb;margin-block-start:2px}
.telegram-preview-body {padding:24px 16px;min-height:288px}
.telegram-bubble {background:var(--bubble);color:var(--preview-ink);border:1px solid var(--line);border-radius:14px 14px 4px 14px;padding:16px;font-size:13px;line-height:2;box-shadow:0 3px 10px #42207906;white-space:pre-wrap;overflow-wrap:anywhere;unicode-bidi:plaintext;min-height:64px}
html[dir=ltr] .telegram-bubble {border-radius:14px 14px 14px 4px}
.telegram-bubble a {color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.preview-disclaimer {display:flex;align-items:flex-start;gap:8px;font-size:10px;color:var(--muted);margin:16px 0 0;line-height:1.9}
.preview-disclaimer .icon {width:15px;height:15px;margin-block-start:2px;flex-shrink:0}
.unsaved-preview {padding:10px 12px;border-radius:8px;background:var(--warning-soft);color:var(--warning);font-size:11px;margin:12px 0 0}
[hidden] {display:none!important}
.message-editor label {margin-block:16px 6px;font-size:12px}
.message-editor input,.message-editor textarea {margin:0;border-radius:10px;font-weight:400;min-width:0;max-width:100%}
.message-editor textarea {min-height:240px;line-height:2;padding:14px;font-size:13px;resize:vertical}
.field-help {color:var(--muted);font-size:10px;line-height:1.9;margin:8px 0 0}
.editor-label {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-block-start:24px}
.editor-label label {margin:0 0 8px}
.character-meter {font:400 10px Inter,sans-serif;color:var(--muted);margin-block-end:8px;white-space:nowrap}
.message-scheduling {margin-block-start:24px;padding-block-start:24px;border-block-start:1px solid var(--line)}
.timezone-pill {font:600 9px Inter,sans-serif;margin-inline-start:auto;background:var(--accent-soft);color:var(--accent-ink);border-radius:5px;padding:4px 6px}
.message-editor input[type=datetime-local] {font-family:Inter,system-ui,sans-serif;font-size:12px;min-height:44px}
.message-info-card {border:1px solid var(--line);background:var(--panel-soft);border-radius:12px;padding:16px;margin-block-end:16px}
.message-info-card .panel-title {font-size:12px}
.message-metadata {margin:0}
.message-metadata>div {padding-block:12px;border-block-end:1px solid var(--line)}
.message-metadata>div:first-child {padding-block-start:4px}
.message-metadata>div:last-child {border:0;padding-block-end:0}
.message-metadata dt {font-size:10px;color:var(--muted);margin-block-end:5px}
.message-metadata dd {font-size:12px;line-height:1.8;margin:0;overflow-wrap:anywhere}
.message-metadata time {font:500 10px/2 Inter,sans-serif;display:block}
.utc-label {font-size:9px;color:var(--muted);display:block}
.content-metrics h3 {font-size:12px;margin:0 0 16px}
.content-metrics>div {display:flex;justify-content:space-between;gap:12px;font-size:11px;margin-block:12px;color:var(--muted)}
.content-metrics strong {font:600 13px Inter,sans-serif;color:var(--ink)}
.content-metrics .field-help {border-block-start:1px solid var(--line);padding-block-start:12px}
.message-action-bar {display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 24px;background:var(--panel-soft);border-block:1px solid var(--line)}
.message-primary-actions,.message-utility-actions {display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.message-action-bar form {margin:0}
.message-action-bar button,.message-action-bar .button {font-size:11px;min-height:42px}
button.soft-button {background:var(--accent-soft);color:var(--accent-ink);border-color:var(--line)}
button.soft-button:hover {border-color:var(--accent);background:var(--panel)}
button.danger-outline {color:var(--danger);background:transparent;border-color:transparent;box-shadow:none}
button.danger-outline:hover {background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.message-action-note {padding:16px 24px 20px;font-size:10px;color:var(--muted);margin:0}
.message-workspace .copy-status {padding-inline:24px;margin:12px 0 0}
.message-workspace .copy-status:empty {display:none}
.message-workspace .ai-action {margin:20px 24px 0;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--panel-soft)}
@media(min-width:961px) and (max-width:1279px) {
  .message-columns {grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px}
  .message-information {grid-column:1/-1;display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
  .message-info-card {margin:0}
}
@media(min-width:701px) and (max-width:960px) {
  .message-columns {grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  .message-information {grid-column:1/-1;display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
  .message-info-card {margin:0}
}
@media(max-width:700px) {
  .header-search {display:none}.app-header {gap:12px}
  .brand {font-size:13px}.brand small {font-size:8px;letter-spacing:0}
  .header-actions {gap:6px}.header-brand {gap:8px}
  .language-switch button {min-width:40px;padding-inline:6px;min-height:40px}
  .language-unavailable {padding:6px;font-size:10px}
  .icon-button {min-width:40px;min-height:40px}
  .message-columns {grid-template-columns:minmax(0,1fr);padding:20px;gap:32px}
  .message-editor {grid-row:1}.message-preview-panel {grid-row:2}
  .message-information {grid-row:3}
  .telegram-preview-body {min-height:200px}
  .workspace-heading {padding:20px;align-items:flex-start}
  .workspace-heading h2 {font-size:13px}
  .message-action-bar {padding:20px;gap:12px}
  .message-primary-actions,.message-utility-actions {width:100%}
  .message-primary-actions>button,.message-primary-actions>form {flex:1}
  .message-primary-actions>form button {width:100%}
  .message-utility-actions>a,.message-utility-actions>button {flex:1}
  .message-utility-actions>form {width:100%}
  .message-utility-actions>form button {width:100%}
  .message-workspace {border-radius:16px}.message-action-note {padding:16px 20px}
  .message-information {display:grid;grid-template-columns:minmax(0,1fr)}
}
@media(max-width:400px) {
  .brand {font-size:11px}.brand small {font-size:7px}.logo {display:none}
  .app-header {padding-inline:12px;gap:8px}.header-brand {gap:4px}
  .header-actions {gap:4px}.language-switch {gap:0}
  .language-switch button {min-width:37px;padding-inline:4px;font-size:9px}
  .language-unavailable {font-size:9px;padding-inline:4px}
  .message-columns {padding:16px}.workspace-heading {padding:16px}
}