/* Workspace visual system. Kanban and its dialogs keep their original styling. */
.workspace-nav, .sidebar, #chat-header, #chat-placeholder, #messages, #composer,
.broadcast-view, .login-view, #modal-settings, #modal-templates, #modal-new-chat {
  --bg-app: #10151e;
  --bg-sidebar: #151c27;
  --bg-header: #151c27;
  --bg-input: #202938;
  --bg-hover: #263345;
  --bg-modal: #19222f;
  --bubble-in: #263244;
  --bubble-out: #174e46;
  --bubble-out-hover: #1d5f53;
  --text: #edf2fa;
  --text-dim: #a6b4c8;
  --text-faint: #9aaac0;
  --accent: #6de0bc;
  --accent-strong: #6de0bc;
  --accent-soft: #6de0bc16;
  --border: #b6c9e21a;
  --border-strong: #b6c9e232;
  color: var(--text);
}
:is(#chat-placeholder, #composer, .broadcast-view, .login-view, #modal-settings, #modal-templates, #modal-new-chat) .btn-primary { color: #102c25; background: #6de0bc; border-color: #6de0bc; }
:is(#chat-placeholder, #composer, .broadcast-view, .login-view, #modal-settings, #modal-templates, #modal-new-chat) .btn-primary:hover { background: #8be9cb; }
:is(.sidebar, #modal-settings, #modal-templates, #modal-new-chat, .broadcast-view) :is(input, select, button):focus-visible { outline: 2px solid #6de0bc; outline-offset: 2px; }
.contact-item:focus-visible { outline: 2px solid #6de0bc; outline-offset: -2px; }
.workspace-nav { width: 94px; flex: 0 0 94px; display: flex; flex-direction: column; align-items: center; padding: 26px 10px 18px; background: #0d121b; border-right: 1px solid #b6c9e214; gap: 30px; }
.workspace-mark { position: relative; font: 700 29px var(--font-display); width: 44px; height: 44px; display: grid; place-items: center; background: #6de0bc; color: #102c25; border-radius: 14px; }
.workspace-mark span { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #e0fff4; right: 8px; top: 8px; }
.workspace-links, .workspace-bottom { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.workspace-bottom { margin-top: auto; }
.workspace-link { min-height: 66px; padding: 10px 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #9aaac0; background: transparent; border: 1px solid transparent; border-radius: 12px; font-size: 10px; font-weight: 600; transition: background .15s, color .15s; }
.workspace-link svg { width: 23px; height: 23px; }
.workspace-link:hover { background: #1d2837; color: #edf2fa; }
.workspace-link.active { color: #6de0bc; background: #6de0bc13; border-color: #6de0bc25; }
.workspace-link:focus-visible, .sidebar button:focus-visible, .welcome-shortcuts button:focus-visible { outline: 2px solid #6de0bc; outline-offset: 2px; }
.app.kanban-open > .workspace-nav { display: none; }
.sidebar { width: 350px; min-width: 300px; }
.sidebar-header { min-height: 100px; padding: 22px 22px 16px; background: transparent; }
.sidebar .brand > svg { display: none; }
.brand-name { font-size: 23px; letter-spacing: -.5px; }
.brand-name small { display: block; color: var(--text-dim); font: 400 11px var(--font-ui); letter-spacing: 0; margin-top: 5px; }
.sidebar #btn-new-chat { width: 38px; height: 38px; border-radius: 12px; background: #6de0bc; color: #102c25; }
.sidebar-search { padding: 2px 20px 16px; background: transparent; }
.sidebar-search .search-ico { left: 33px; top: calc(50% - 7px); }
.sidebar-search input { padding: 12px 12px 12px 38px; border: 1px solid var(--border); border-radius: 11px; font-size: 13px; }
.sidebar .inbox-tabs { margin: 0 20px 14px; padding: 4px; gap: 4px; border: 1px solid var(--border); border-radius: 10px; background: #101721; }
.sidebar .inbox-tab { border: 0; border-radius: 7px; padding: 8px 4px; font-size: 12px; }
.sidebar .inbox-tab.active { background: #28364a; color: #edf2fa; box-shadow: 0 1px 4px #0002; }
.contact-list { padding: 0 12px 16px; }
.contact-item { padding: 15px 12px; margin: 3px 0; border: 1px solid transparent; border-radius: 12px; animation: none; }
.contact-item.active { background: #233143; border-color: #6de0bc2e; }
.contact-item.active .contact-name { color: #edf2fa; }
.contact-name { font-size: 13px; font-weight: 600; }
.contact-preview { font-size: 12px; }
.contact-time { font-size: 10px; }
.sidebar .avatar, #chat-header .avatar { width: 42px; height: 42px; border-radius: 14px; font-size: 14px; }
.chat { background: #10151e; }
#chat-header { min-height: 86px; padding: 18px 28px; gap: 12px; border-bottom: 1px solid var(--border); background: #151c27; }
#chat-header .chat-name { font-size: 16px; }
#chat-header .chat-sub { font-size: 12px; margin-top: 4px; }
#chat-header .chat-header-info { min-width: 0; }
#chat-header .chat-header-info > div:last-child { min-width: 0; }
#chat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chat-header .chat-header-actions { gap: 12px; }
.mobile-back { display: none; }
#messages { padding: 26px clamp(20px, 4vw, 72px); }
#messages .msg { border-radius: 15px; padding: 11px 14px 8px; box-shadow: 0 2px 4px #0002; line-height: 1.55; max-width: min(76%, 640px); }
#messages .msg.in { border-top-left-radius: 4px; }
#messages .msg.out { border-top-right-radius: 4px; }
#messages .msg-day { color: #b6c5d9; background: #192333; border: 1px solid #b6c9e21a; font-size: 11px; }
#composer { padding: 16px 26px 20px; background: #151c27; border-top: 1px solid var(--border); }
#composer .composer-row { padding: 7px; gap: 4px; background: #202938; border: 1px solid var(--border-strong); border-radius: 15px; }
#composer .message-input { background: transparent; border-radius: 8px; font-size: 14px; min-width: 0; }
#composer .icon-btn { flex-shrink: 0; }
#composer .icon-btn-send { background: #6de0bc; color: #102c25; border-radius: 10px; }
#composer .composer-template-hint { background: #eec37112; color: #eed5a3; font-size: 12px; }
#chat-placeholder { background: radial-gradient(ellipse at 50% 35%, #1c344044, transparent 65%), #10151e; }
.chat-placeholder-inner { width: min(520px, 90%); text-align: center; }
.welcome-eyebrow { font-size: 10px; letter-spacing: 3px; color: #94b4af; font-weight: 600; }
.welcome-symbol { width: 84px; height: 84px; margin: 30px auto 24px; display: grid; place-items: center; background: #6de0bc0d; border: 1px solid #6de0bc30; border-radius: 25px; color: #6de0bc; transform: rotate(-6deg); }
.welcome-symbol svg { width: 40px; height: 40px; }
#chat-placeholder h2 { font: 600 clamp(28px, 3vw, 40px)/1.2 var(--font-display); color: #edf2fa; letter-spacing: -1px; margin: 0 0 18px; }
#chat-placeholder p { max-width: 365px; margin: 0 auto 26px; font-size: 14px; line-height: 1.8; color: #a6b4c8; }
.welcome-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 46px; }
.welcome-shortcuts button { padding: 16px; text-align: left; color: #b6c5d9; border: 1px solid #b6c9e21a; border-radius: 12px; background: #18222e; font-size: 12px; }
.welcome-shortcuts button:hover { background: #263345; }
.welcome-shortcuts span { float: right; margin-left: 10px; color: #6de0bc; }
.app.broadcast-open > .sidebar { display: none; }
.app.broadcast-open > .chat { display: flex; }
.broadcast-view { background: #10151e; min-width: 0; }
.broadcast-view > .chat-header { padding: 24px 32px; min-height: 96px; background: #151c27; gap: 20px; flex-wrap: wrap; }
.broadcast-view .chat-name { font: 600 26px var(--font-display); }
.broadcast-view .chat-sub { margin-top: 5px; }
.broadcast-body { padding: 28px 32px; }
.broadcast-form { max-width: 850px; margin: 0 auto; padding: 26px; background: #19222f; border: 1px solid #b6c9e21a; border-radius: 16px; }
.broadcast-card { border-radius: 14px; background: #19222f; }
.broadcast-tabs { padding: 4px; border-radius: 10px; background: #101721; }
.broadcast-tab { border-radius: 7px; }
#modal-settings .modal-card, #modal-templates .modal-card, #modal-new-chat .modal-card { border-radius: 20px; border-color: #b6c9e22b; padding: 28px; box-shadow: 0 24px 100px #0008; }
#modal-settings .modal-header, #modal-templates .modal-header, #modal-new-chat .modal-header { padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid #b6c9e21a; }
#modal-settings h3, #modal-templates h3, #modal-new-chat h3 { font-size: 23px; }
#modal-settings .modal-card-settings { width: min(940px, calc(100vw - 32px)); display: flex; flex-direction: column; }
#modal-settings .modal-header, #modal-settings .modal-footer { flex-shrink: 0; }
#modal-settings .settings-body { min-height: 0; overflow-y: auto; }
.settings-body { grid-template-columns: 170px minmax(0, 1fr); gap: 28px; }
.settings-nav { border-right: 1px solid #b6c9e21a; padding-right: 16px; }
.settings-nav-item { border-radius: 10px; padding: 13px 12px; }
.settings-nav-item.active { color: #6de0bc; background: #6de0bc12; }
.settings-pane-title { font-size: 17px; }
.settings-pane-desc { line-height: 1.7; font-size: 12px; }
.wallpaper-preview { display: flex; flex-direction: column; justify-content: center; gap: 14px; height: 185px; padding: 26px; background-color: #10151e; background-position: center; border: 1px solid #b6c9e22b; border-radius: 14px; margin: 18px 0; }
.wallpaper-preview span { border: 1px solid #ffffff12; box-shadow: 0 2px 8px #0004; padding: 10px 14px; font-size: 12px; border-radius: 12px; max-width: 90%; }
.preview-in { background: #263244; align-self: flex-start; }
.preview-out { background: #174e46; align-self: flex-end; }
.wallpaper-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wallpaper-presets { border-top: 1px solid #b6c9e21a; margin-top: 20px; padding-top: 16px; }
.wallpaper-presets summary { font-size: 12px; color: #b6c5d9; cursor: pointer; margin-bottom: 16px; }
#modal-settings .bg-picker { gap: 8px; }
#modal-settings .bg-swatch { min-width: 0; }
#modal-settings .field-input, #modal-new-chat .field-input, #modal-templates .field-input { border-radius: 10px; padding: 12px; }
#modal-settings .modal-footer { margin-top: 24px; padding-top: 18px; border-top: 1px solid #b6c9e21a; flex-wrap: wrap; }
#modal-templates .template-body { gap: 22px; }
#modal-templates .template-detail { background: #111a26; border-radius: 14px; }
.login-view { background: radial-gradient(ellipse at 25% 25%, #214b4555, transparent 55%), #10151e; }
.login-view .login-bubbles { display: none; }
.login-card { border: 1px solid #b6c9e22b; background: #19222f; border-radius: 22px; padding: 40px; box-shadow: 0 24px 100px #0005; }
.login-title { font-size: 29px; letter-spacing: -.5px; }
.login-sub { line-height: 1.8; }
@media (max-width: 1100px) {
  .sidebar { width: 310px; min-width: 280px; }
  #chat-header { padding: 16px; flex-wrap: wrap; }
  #chat-header .chat-header-actions { margin-left: auto; }
}
@media (max-width: 860px) {
  body:has(.app:not(.kanban-open):not([hidden])) .toasts { bottom: 80px; }
  .app:not(.kanban-open) { padding-bottom: 68px; }
  .workspace-nav { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; height: 68px; z-index: 30; flex-direction: row; padding: 5px 8px; gap: 0; border-top: 1px solid #b6c9e21a; }
  .workspace-mark { display: none; }
  .workspace-links, .workspace-bottom { flex-direction: row; gap: 2px; width: auto; flex: 1; margin: 0; }
  .workspace-links { flex: 4; }
  .workspace-bottom { flex: 2; }
  .workspace-link { flex: 1; min-width: 0; min-height: 56px; gap: 4px; font-size: 9px; padding: 6px 2px; }
  .workspace-link svg { width: 20px; height: 20px; }
  .sidebar { width: 100%; min-width: 0; }
  .mobile-back { display: inline-flex; }
  #chat-header { gap: 8px; padding: 12px; }
  #chat-header .chat-header-info { flex: 1; }
  #chat-header .chat-header-actions { width: 100%; justify-content: space-between; }
  #chat-header .window-pill { font-size: 10px; }
  #messages { padding: 18px 12px; }
  #messages .msg { max-width: 88%; }
  #composer { padding: 10px; }
  #composer .icon-btn { width: 34px; height: 38px; }
  #composer .composer-row { padding: 4px; gap: 0; }
  #composer .composer-template-hint { flex-wrap: wrap; }
  .broadcast-view > .chat-header { padding: 20px; }
  .broadcast-body { padding: 16px; }
  .broadcast-form { padding: 18px; }
  #modal-settings .modal-card, #modal-templates .modal-card, #modal-new-chat .modal-card { padding: 20px; max-height: 90dvh; }
  .settings-body { grid-template-columns: 1fr; grid-template-rows: max-content max-content; align-content: start; gap: 18px; }
  .settings-nav { flex-direction: row; border-right: 0; border-bottom: 1px solid #b6c9e21a; padding: 0 0 12px; overflow-x: auto; }
  .settings-nav-item { flex-shrink: 0; font-size: 11px; padding: 10px; }
  .settings-nav-item svg { width: 16px; height: 16px; }
  .wallpaper-preview { padding: 16px; }
  .settings-grid { grid-template-columns: 1fr; }
  .login-card { padding: 28px; }
}