*{box-sizing:border-box}
body{margin:0;background:#0f0f0f;color:#eee;font-family:Arial,sans-serif}
.app{max-width:1000px;height:100vh;margin:0 auto;display:flex;flex-direction:column;padding:18px}
h1{text-align:center;color:#ff3c00;margin:0 0 12px;font-size:34px}
.notice{background:#1a1a1a;border:1px solid #333;border-radius:12px;padding:12px 16px;color:#bbb;text-align:center;font-size:14px;margin-bottom:14px}
.chat{flex:1;overflow-y:auto;background:#151515;border:1px solid #333;border-radius:16px;padding:18px}
.row{display:flex;margin-bottom:14px}
.row.user{justify-content:flex-end}
.row.ai{justify-content:flex-start}
.bubble{max-width:78%;padding:14px 16px;border-radius:15px;white-space:pre-wrap;line-height:1.5;font-size:16px}
.user .bubble{background:#ff3c00;color:white;border-bottom-right-radius:4px}
.ai .bubble{background:#242424;color:#eee;border:1px solid #3a3a3a;border-bottom-left-radius:4px}
.think-wrap{background:#181818;border-left:3px solid #ff3c00;border-radius:8px;padding:9px 11px;margin-bottom:12px;color:#aaa;font-size:13px;max-height:92px;overflow:auto}
.think-title{color:#ff9d70;font-weight:bold;margin-bottom:4px}
.think-text{white-space:pre-wrap}
.answer-title{color:#8fd18f;font-size:13px;font-weight:bold;margin-bottom:6px}
.answer-text{white-space:pre-wrap;color:#eee}
.status{min-height:30px;color:#aaa;font-size:14px;padding:10px 4px 6px}
.status strong{color:#ff3c00}
.input{display:flex;gap:10px}
textarea{flex:1;min-height:70px;max-height:180px;resize:vertical;background:#222;color:#fff;border:1px solid #444;border-radius:14px;padding:14px;font-size:16px;outline:none}
textarea:focus{border-color:#ff3c00}
button{width:130px;background:#ff3c00;color:white;border:none;border-radius:14px;font-size:16px;font-weight:bold;cursor:pointer}
button:disabled{opacity:.45;cursor:not-allowed}
.cursor{color:#ff3c00;animation:blink .8s infinite}
@keyframes blink{0%{opacity:.2}50%{opacity:1}100%{opacity:.2}}
@media(max-width:700px){.app{padding:10px}.bubble{max-width:92%}.input{flex-direction:column}button{width:100%;height:48px}.think-wrap{max-height:72px}}

/* === UX PATCH === */
:root{
  --bg:#0b141a;
  --panel:#182229;
  --bubble-ai:#202c33;
  --bubble-user:#005c4b;
  --text:#e9edef;
  --text-user:#e9edef;
  --muted:#8696a0;
  --border:#222d34;
  --accent:#00a884;
  --input-expanded-bottom-offset:0px;
}

:root[data-theme="light"]{
  --bg:#efeae2;
  --panel:#ffffff;
  --bubble-ai:#ffffff;
  --bubble-user:#d9fdd3;
  --text:#111b21;
  --text-user:#111b21;
  --muted:#667781;
  --border:#e9edef;
  --accent:#008069;
}

html,body{
  width:100%;
  height:100%;
  background:var(--bg)!important;
  color:var(--text)!important;
  overflow: hidden !important;
}

.app{
  width:100%!important;
  max-width:none!important;
  height:100dvh!important;
  margin:0!important;
  padding:6px!important;
  overflow: hidden !important;
}

h1{
  color:var(--accent)!important;
  margin:0 0 6px!important;
  font-size:30px!important;
  line-height:1.1!important;
}

.notice{display:none!important}

.model-box{
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:14px;
  padding:8px;
  margin-bottom:6px;
}

.model-box-split {
  display: flex;
  gap: 8px;
  width: 100%;
}

.wake-btn-split {
  flex: 1;
  min-height: 44px;
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

:root[data-theme="light"] .wake-btn-split {
  background: rgba(0, 0, 0, 0.03) !important;
}

.wake-btn-split:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--accent);
}

:root[data-theme="light"] .wake-btn-split:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06) !important;
}

.wake-btn-split.active {
  background: var(--accent) !important;
  color: white !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 10px rgba(47, 168, 102, 0.4) !important;
}

.wake-btn-split.loading {
  background: #ffd060 !important;
  color: #222 !important;
  border-color: #ffd060 !important;
  animation: pulse-loading-model 1.5s infinite alternate !important;
  cursor: wait;
}

.model-text{
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
  text-align:center;
}

.chat{
  position: relative !important;
  flex:1!important;
  min-height:0!important;
  width:100%!important;
  max-width:100%!important;
  overflow-y:auto!important;
  background:var(--panel)!important;
  border:1px solid var(--border)!important;
  border-radius:14px!important;
  padding:5px!important;
}

.chat::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-image: url("/static/whatsapp_doodle.png") !important;
  background-repeat: repeat !important;
  background-size: 340px !important;
  opacity: 0.1 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

:root[data-theme="dark"] .chat::before {
  filter: invert(1) !important;
  opacity: 0.07 !important;
}

.row{
  margin-bottom:8px!important;
  position: relative !important;
  z-index: 1 !important;
}

.bubble{
  box-sizing:border-box!important;
  padding:11px!important;
  border-radius:14px!important;
  line-height:1.45!important;
  font-size:16px!important;
  overflow-wrap:break-word!important;
}

.ai .bubble{
  width:100%!important;
  max-width:100%!important;
  background:var(--bubble-ai)!important;
  color:var(--text)!important;
  border:1px solid var(--border)!important;
}

.user .bubble{
  max-width:92%!important;
  background:var(--bubble-user)!important;
  color:var(--text-user, white)!important;
}

.think-wrap{
  background:rgba(0,0,0,.12)!important;
  border-left:3px solid var(--accent)!important;
  color:var(--muted)!important;
  max-height:72px!important;
}

.think-title{color:var(--accent)!important}
.answer-text{color:var(--text)!important}

.status-line {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 4px !important;
}

.status{
  min-height:24px!important;
  font-size:13px!important;
  padding:5px 4px 3px!important;
  color:var(--muted)!important;
}

.status strong{color:var(--accent)!important}

.input{gap:6px!important}

textarea{
  width:100%!important;
  min-height:58px!important;
  max-height:70dvh!important;
  resize:none!important;
  background:var(--bubble-ai)!important;
  color:var(--text)!important;
  border:1px solid var(--border)!important;
  border-radius:14px!important;
  padding:10px!important;
  font-size:16px!important;
}

textarea:focus{
  border-color:var(--accent)!important;
  outline:none!important;
}

button{background:var(--accent)!important}

.theme-btn{
  position:fixed!important;
  top:8px!important;
  right:8px!important;
  width:auto!important;
  min-width:42px!important;
  height:34px!important;
  padding:0 10px!important;
  font-size:14px!important;
  border-radius:999px!important;
  z-index:10!important;
}

@media(max-width:700px){
  .app{padding:5px!important}
  h1{font-size:28px!important;margin-bottom:5px!important}
  .chat{padding:5px!important;border-radius:12px!important}
  .input{flex-direction:column!important}
  button{width:100%!important;height:48px!important}
}


/* === SERVER STATUS UI PATCH START === */
.server-btn{
  width:100%;
  min-height:38px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  margin-bottom:6px;
  border-radius:12px;
  border:1px solid var(--border, #333);
  background:var(--panel-soft, #202522);
  color:var(--text, #eee);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}

.server-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#37b36b;
  flex:0 0 auto;
}

.server-btn.busy .server-dot{
  background:#f59f00;
}

.server-btn.critical .server-dot{
  background:#e03131;
}

.server-mini-bar{
  flex:1;
  height:6px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(128,128,128,.25);
}

#serverMiniFill{
  display:block;
  height:100%;
  width:0%;
  background:var(--accent, #1f9d55);
  border-radius:999px;
  transition:width .25s ease;
}

.server-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:100;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:10px;
}

.server-modal.hidden{
  display:none;
}

.server-modal-card{
  width:100%;
  max-width:620px;
  max-height:85dvh;
  overflow:auto;
  border-radius:18px;
  background:var(--panel, #fff);
  color:var(--text, #111);
  border:1px solid var(--border, #ddd);
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}

.server-modal-head{
  position:sticky;
  top:0;
  background:var(--panel, #fff);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px;
  border-bottom:1px solid var(--border, #ddd);
  z-index:2;
}

.server-close{
  width:38px!important;
  height:38px!important;
  border-radius:50%!important;
  font-size:22px!important;
  line-height:1!important;
  padding:0!important;
}

.server-modal-body{
  padding:12px;
}

.metric-card{
  background:var(--panel-soft, rgba(128,128,128,.12));
  border:1px solid var(--border, #ddd);
  border-radius:14px;
  padding:10px;
  margin-bottom:10px;
}

.metric-title{
  font-weight:700;
  margin-bottom:8px;
}

.metric-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:14px;
  padding:4px 0;
  border-bottom:1px solid rgba(128,128,128,.15);
}

.metric-row:last-child{
  border-bottom:none;
}

.metric-bar{
  height:8px;
  border-radius:999px;
  background:rgba(128,128,128,.22);
  overflow:hidden;
  margin:6px 0 8px;
}

.metric-fill{
  height:100%;
  width:0%;
  background:var(--accent, #1f9d55);
  border-radius:999px;
}

.metric-fill.warn{
  background:#f59f00;
}

.metric-fill.danger{
  background:#e03131;
}

@media(max-width:700px){
  .server-btn{
    min-height:36px;
    font-size:12px;
    padding:6px 8px;
  }

  .server-modal{
    padding:6px;
  }

  .server-modal-card{
    max-height:88dvh;
    border-radius:16px;
  }
}
/* === SERVER STATUS UI PATCH END === */


/* === MOBILE UX POLISH PATCH START === */

/* Светлая тема: не примитивный бело-зелёный, а мягкая палитра */
:root{
  --bg:#eef7f1;
  --bg2:#f8fcf9;
  --panel:#ffffff;
  --panel-soft:#e7f3eb;
  --panel-glass:rgba(255,255,255,.78);
  --bubble-ai:#ffffff;
  --bubble-user:#2fa866;
  --bubble-user-2:#23844f;
  --text:#102017;
  --muted:#607267;
  --border:#cfe3d5;
  --accent:#2fa866;
  --accent-hover:#23844f;
  --shadow:0 12px 34px rgba(31,75,49,.12);
}

/* Тёмная тема: не чёрная, а тёмно-серая/зелёно-серая */
:root[data-theme="dark"]{
  --bg:#1d2320;
  --bg2:#252d28;
  --panel:#28302b;
  --panel-soft:#323c35;
  --panel-glass:rgba(40,48,43,.82);
  --bubble-ai:#303933;
  --bubble-user:#3ba56d;
  --bubble-user-2:#2f8d5d;
  --text:#eef4ef;
  --muted:#a8b8ad;
  --border:#3d4a42;
  --accent:#57bd82;
  --accent-hover:#6fd293;
  --shadow:0 12px 34px rgba(0,0,0,.24);
}

html,body{
  background:
    radial-gradient(circle at 20% 0%, rgba(47,168,102,.14), transparent 34%),
    linear-gradient(180deg,var(--bg2),var(--bg))!important;
}

.app{
  background:transparent!important;
}

/* Когда чат начал работу — убираем лишний верх, освобождаем экран под ответ */
body.chat-active h1,
body.chat-active .model-box,
body.chat-active .welcome-box{
  display:none!important;
}

body.chat-active .app{
  padding-top:6px!important;
}

/* Во время генерации максимум пространства под статью */
body.generating .chat{
  flex:1 1 auto!important;
}

body.generating .status{
  min-height:18px!important;
  font-size:12px!important;
  padding:3px 4px!important;
}

/* Чат и сообщения */
.chat{
  background:var(--panel-glass)!important;
  box-shadow:var(--shadow)!important;
  backdrop-filter:blur(10px);
}

.ai .bubble{
  background:var(--bubble-ai)!important;
  box-shadow:0 6px 20px rgba(30,60,42,.08)!important;
}

.user .bubble{
  background:linear-gradient(135deg,var(--bubble-user),var(--bubble-user-2))!important;
  box-shadow:0 8px 22px rgba(47,168,102,.22)!important;
}

/* Поле ввода приятнее, ближе к мобильным мессенджерам */
.input{
  width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  background:var(--panel-glass)!important;
  border:1px solid var(--border)!important;
  border-radius:18px!important;
  padding:7px!important;
  padding-bottom:max(14px, env(safe-area-inset-bottom))!important;
  box-shadow:var(--shadow)!important;
  backdrop-filter:blur(10px);
}

textarea{
  background:var(--panel)!important;
  border:1px solid var(--border)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45)!important;
}

textarea:focus{
  background:var(--panel)!important;
  box-shadow:0 0 0 3px rgba(47,168,102,.12)!important;
}

#btn{
  background:linear-gradient(135deg,var(--accent),var(--accent-hover))!important;
  box-shadow:0 8px 20px rgba(47,168,102,.24)!important;
}
/* server-btn/devices-btn — defined in UNIFIED PILL block at end of file */

/* Десктоп: кнопки не тянем на всю ширину без нужды */
@media(min-width:701px){
  .wake-btn{
    max-width:420px!important;
    margin:0 auto!important;
    display:block!important;
  }

  .input{
    width:100%!important;
    max-width:1000px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    flex-direction:row!important;
    align-items:center!important;
  }

  .input button,
  #btn{
    width:140px!important;
    flex:0 0 140px!important;
  }
}

/* Мобильный: читаемость важнее декоративщины */
@media(max-width:700px){
  body.chat-active .app{
    padding-top:6px!important;
  }

  .chat{
    border-radius:16px!important;
  }

  .input{
    margin-top:5px!important;
  }

  #btn{
    margin-bottom:4px!important;
  }
}

/* === MOBILE UX POLISH PATCH END === */


/* === BRAND TITLE PATCH START === */
.brand-chat{
  color:#7d8a82!important;
  font-weight:800!important;
  letter-spacing:.5px;
  text-transform:none!important;
}

.brand-gpt{
  color:var(--accent,#1f9d55)!important;
  font-weight:900!important;
  letter-spacing:1px;
}
/* === BRAND TITLE PATCH END === */


/* === FINAL VRAM HEADER FIX — SUPERSEDED BY UNIFIED PILL (see end of file) === */

/* Главная логика: если VRAM показывает, что модель в памяти — трактор скрыть */
body.vram-model-ready .model-box,
body.vram-model-ready .notice{
  display:none!important;
}

body.vram-model-ready .row.ai:first-child{
  display:none!important;
}

body.vram-model-ready .chat{
  flex:1 1 auto!important;
}

/* === FINAL VRAM HEADER FIX END === */


/* === HISTORY VOICE UI PATCH START === */

.chat-actions{
  position:fixed;
  top:48px;
  left:8px;
  right:8px;
  z-index:35;
  display:flex;
  justify-content:center;
  gap:6px;
  pointer-events:none;
}

.mini-action-btn{
  pointer-events:auto;
  width:auto!important;
  min-width:74px!important;
  height:30px!important;
  padding:0 10px!important;
  border-radius:999px!important;
  font-size:12px!important;
  background:rgba(255,255,255,.78)!important;
  color:var(--text)!important;
  border:1px solid var(--border)!important;
  box-shadow:0 6px 16px rgba(30,100,60,.10)!important;
  backdrop-filter:blur(8px);
}

:root[data-theme="dark"] .mini-action-btn{
  background:rgba(40,48,43,.82)!important;
}

body.chat-active .chat-actions{
  top:8px;
  left:106px;
  right:60px;
}

.history-panel{
  position:fixed;
  inset:0;
  z-index:90;
  background:rgba(0,0,0,.35);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:8px;
}

.history-panel.hidden{
  display:none;
}

.history-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px;
  border-bottom:1px solid var(--border);
}

.history-list{
  max-height:70dvh;
  overflow:auto;
  padding:10px;
}

.history-panel::before{
  content:"";
  position:absolute;
  inset:0;
}

.history-panel > *{
  position:relative;
}

.history-panel{
  color:var(--text);
}

.history-list,
.history-head{
  background:var(--panel);
}

.history-panel .history-head,
.history-panel .history-list{
  width:100%;
  max-width:620px;
}

.history-panel .history-head{
  border-radius:18px 18px 0 0;
}

.history-panel .history-list{
  border-radius:0 0 18px 18px;
  border-left:1px solid var(--border);
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

.history-close{
  width:36px!important;
  height:36px!important;
  border-radius:50%!important;
  padding:0!important;
  font-size:22px!important;
}

.history-item{
  display:grid;
  grid-template-columns:1fr 38px;
  gap:8px;
  align-items:center;
  padding:7px 0;
  border-bottom:1px solid rgba(128,128,128,.16);
}

.history-open{
  width:100%!important;
  min-height:42px!important;
  text-align:left!important;
  padding:8px 10px!important;
  border-radius:12px!important;
  background:var(--panel-soft)!important;
  color:var(--text)!important;
  font-size:14px!important;
  font-weight:600!important;
}

.history-delete{
  width:38px!important;
  height:38px!important;
  border-radius:50%!important;
  padding:0!important;
  background:#e55353!important;
}

.history-empty{
  color:var(--muted);
  padding:18px;
  text-align:center;
}

.voice-row{
  display:flex;
  gap:6px;
  align-items:center;
  margin-bottom:6px;
}

.mic-btn,
.speak-last-btn{
  width:46px!important;
  min-width:46px!important;
  height:42px!important;
  border-radius:14px!important;
  padding:0!important;
  font-size:20px!important;
  flex:0 0 46px!important;
}

.mic-btn.recording{
  background:#e55353!important;
  animation:micPulse .9s infinite;
}

@keyframes micPulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.04)}
  100%{transform:scale(1)}
}

.whisper-select{
  flex:1;
  height:42px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  padding:0 10px;
  font-size:15px;
  outline:none;
}

.speak-btn{
  width:auto!important;
  height:34px!important;
  min-height:34px!important;
  margin-top:10px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  font-size:13px!important;
  background:var(--panel-soft)!important;
  color:var(--text)!important;
  border:1px solid var(--border)!important;
}

@media(min-width:701px){
  .chat-actions{
    top:10px;
    left:120px;
    right:80px;
  }

  body.chat-active .chat-actions{
    top:10px;
  }

  .voice-row{
    max-width:1000px;
  }
  .send-actions{
    width:auto!important;
    margin-top:0!important;
  }
}

@media(max-width:700px){
  .chat-actions{
    top:48px;
  }

  body.vram-model-ready .chat-actions{
    top:48px;
  }

  body.chat-active .chat-actions{
    top:8px;
  }

  .mini-action-btn{
    min-width:68px!important;
    height:28px!important;
    font-size:11px!important;
  }

  .voice-row{
    margin-bottom:5px;
  }
}

/* === HISTORY VOICE UI PATCH END === */


/* === MOBILE NAV SETTINGS REWORK START === */

/* Старую кнопку темы прячем. Теперь справа настройки ⚙️ */
.theme-btn{
  display:none!important;
}

.settings-btn{
  position:fixed!important;
  top:8px!important;
  right:8px!important;
  z-index:60!important;

  width:44px!important;
  min-width:44px!important;
  max-width:44px!important;
  height:34px!important;
  min-height:34px!important;

  padding:0!important;
  border-radius:17px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  background:linear-gradient(135deg,var(--accent),var(--accent-hover))!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.25)!important;
  box-shadow:0 6px 18px rgba(30,100,60,.20)!important;
  font-size:18px!important;
}

/* На стартовом экране кнопки Новый/История идут нормально под заголовком, а не поверх трактора */
.chat-actions{
  position:static!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;

  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:8px!important;

  margin:0 auto 8px!important;
  padding:0!important;
  pointer-events:auto!important;
  z-index:auto!important;
}

.mini-action-btn{
  pointer-events:auto!important;
  width:auto!important;
  min-width:86px!important;
  height:34px!important;
  padding:0 14px!important;
  border-radius:999px!important;
  font-size:14px!important;
  font-weight:800!important;
  background:var(--panel-glass,var(--panel))!important;
  color:var(--text)!important;
  border:1px solid var(--border)!important;
  box-shadow:0 6px 18px rgba(30,100,60,.10)!important;
  backdrop-filter:blur(8px);
}

/* Когда началась работа — Chat ЖПТ уходит, а Новый/История становятся верхней панелью */
body.chat-active h1{
  display:none!important;
}

body.chat-active .chat-actions{
  position:fixed!important;
  top:8px!important;
  left:108px!important;
  right:60px!important;
  z-index:55!important;
  margin:0!important;
  justify-content:center!important;
}

body.chat-active .mini-action-btn{
  min-width:68px!important;
  height:32px!important;
  padding:0 10px!important;
  font-size:13px!important;
}

/* История — нормальное полноэкранное окно */
.history-panel{
  position:fixed!important;
  inset:0!important;
  z-index:120!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;

  padding:0!important;
  background:var(--panel)!important;
  color:var(--text)!important;
}

.history-panel.hidden{
  display:none!important;
}

.history-panel::before{
  display:none!important;
}

.history-head{
  width:100%!important;
  max-width:none!important;
  min-height:58px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;

  padding:10px 14px!important;
  background:var(--panel)!important;
  border-bottom:1px solid var(--border)!important;
  border-radius:0!important;
  box-sizing:border-box!important;
}

.history-head strong{
  font-size:22px!important;
}

.history-list{
  width:100%!important;
  max-width:none!important;
  flex:1!important;
  max-height:none!important;
  overflow:auto!important;

  padding:12px!important;
  background:var(--bg)!important;
  border:none!important;
  border-radius:0!important;
  box-sizing:border-box!important;
}

.history-close{
  width:42px!important;
  height:42px!important;
  border-radius:50%!important;
  padding:0!important;
  font-size:26px!important;
}

/* Настройки — отдельное нормальное модальное окно */
.settings-modal{
  position:fixed;
  inset:0;
  z-index:130;
  background:rgba(0,0,0,.42);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:8px;
}

.settings-modal.hidden{
  display:none;
}

.settings-card{
  width:100%;
  max-width:620px;
  max-height:86dvh;
  overflow:auto;
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}

.settings-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px;
  border-bottom:1px solid var(--border);
}

.settings-head strong{
  font-size:22px;
}

.settings-close{
  width:42px!important;
  height:42px!important;
  border-radius:50%!important;
  padding:0!important;
  font-size:26px!important;
}

.settings-body{
  padding:12px;
}

.settings-row{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-bottom:14px;
  font-size:15px;
  font-weight:700;
}

.settings-row select{
  width:100%;
  height:46px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--panel-soft);
  color:var(--text);
  padding:0 12px;
  font-size:16px;
}

.settings-note{
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
  padding:10px;
  background:var(--panel-soft);
  border-radius:12px;
}

.settings-status-section{
  margin-bottom:14px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--panel-soft);
}

.settings-status-title{
  margin-bottom:10px;
  font-size:15px;
  font-weight:800;
}

.settings-status-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.settings-status-grid label{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.settings-status-grid label span{
  color:var(--muted);
  font-size:11px!important;
  font-weight:700;
}

.settings-status-grid select{
  width:100%;
  height:40px;
  padding:0 8px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--panel);
  color:var(--text);
  font-size:13px;
  font-weight:700;
}

.settings-status-hint{
  margin-top:9px;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}

/* Нижняя панель: select модели и нижнюю 🔊 убираем с главного экрана */
.voice-row{
  display:none!important;
}

/* JS перенесёт micBtn и btn сюда */
.send-actions{
  display:flex;
  gap:8px;
  width:100%;
  margin-top:8px;
}

.send-actions #btn,
.send-actions #micBtn{
  height:52px!important;
  min-height:52px!important;
  border-radius:18px!important;
  font-size:18px!important;
  font-weight:900!important;
  padding:0 12px!important;
  margin:0!important;
}

/* Пустое поле: большая кнопка микрофона */
body:not(.has-input) .send-actions #btn{
  display:none!important;
}

body:not(.has-input) .send-actions #micBtn{
  display:flex!important;
  width:100%!important;
  flex:1 1 100%!important;
  align-items:center!important;
  justify-content:center!important;
}

/* Есть текст: Отправить + маленький микрофон */
body.has-input .send-actions #btn{
  display:flex!important;
  flex:1 1 75%!important;
  align-items:center!important;
  justify-content:center!important;
}

body.has-input .send-actions #micBtn{
  display:flex!important;
  flex:0 0 25%!important;
  width:auto!important;
  min-width:70px!important;
  align-items:center!important;
  justify-content:center!important;
}

/* Кнопка чтения остаётся только возле ответа */
.speak-last-btn{
  display:none!important;
}

.speak-btn{
  width:auto!important;
  height:34px!important;
  min-height:34px!important;
  margin-top:10px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  font-size:13px!important;
  background:var(--panel-soft)!important;
  color:var(--text)!important;
  border:1px solid var(--border)!important;
}

/* Когда идёт генерация, нижняя панель компактнее */
body.generating .send-actions{
  display:none!important;
}

body.generating textarea{
  min-height:44px!important;
  max-height:44px!important;
}

@media(max-width:700px){
  body.chat-active .app{
    padding-top:6px!important;
  }

  body.chat-active .chat-actions{
    left:106px!important;
    right:58px!important;
  }

  .mini-action-btn{
    min-width:78px!important;
    height:32px!important;
    font-size:13px!important;
  }

  body.chat-active .mini-action-btn{
    min-width:64px!important;
    height:30px!important;
    font-size:12px!important;
  }

  .settings-btn{
    top:8px!important;
    right:8px!important;
  }

  .settings-modal{
    padding:6px;
  }

  .settings-card{
    border-radius:16px;
  }
}

/* === MOBILE NAV SETTINGS REWORK END === */


/* === VOICE SETTINGS HISTORY POLISH START === */

/* Кнопка Читать справа под ответом */
.speak-btn{
  display:block!important;
  margin-left:auto!important;
  margin-right:0!important;
  text-align:center!important;
}

/* История: нормальная полноэкранная панель без разъезжающихся кусков */
#historyPanel{
  position:fixed!important;
  inset:0!important;
  z-index:140!important;
  padding:0!important;
  margin:0!important;
  background:var(--panel)!important;
  color:var(--text)!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
}

#historyPanel:not(.hidden){
  display:flex!important;
  flex-direction:column!important;
}

#historyPanel.hidden{
  display:none!important;
}

#historyPanel::before{
  display:none!important;
  content:none!important;
}

#historyPanel .history-head{
  width:100%!important;
  max-width:none!important;
  min-height:60px!important;
  border-radius:0!important;
  border:0!important;
  border-bottom:1px solid var(--border)!important;
  background:var(--panel)!important;
  box-sizing:border-box!important;
  flex:0 0 auto!important;
}

#historyPanel .history-list{
  width:100%!important;
  max-width:none!important;
  flex:1 1 auto!important;
  max-height:none!important;
  overflow:auto!important;
  border:0!important;
  border-radius:0!important;
  background:var(--bg)!important;
  box-sizing:border-box!important;
  padding:12px!important;
}

/* Крестик закрытия истории — серый, не зелёный */
#historyPanel .history-close{
  background:#d8ded9!important;
  color:#3d4841!important;
  box-shadow:none!important;
}

:root[data-theme="dark"] #historyPanel .history-close{
  background:#3b4640!important;
  color:#dce8df!important;
}

/* Карточка истории: текст не вылезает за фон */
.history-item{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 44px!important;
  gap:8px!important;
  align-items:stretch!important;
  width:100%!important;
  box-sizing:border-box!important;
  padding:7px 0!important;
}

.history-open{
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  line-height:1.25!important;
  text-align:left!important;
  box-sizing:border-box!important;
}

.history-open small{
  display:block!important;
  margin-top:4px!important;
  color:var(--muted)!important;
  font-size:11px!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}

.history-delete{
  width:44px!important;
  min-width:44px!important;
  height:44px!important;
  border-radius:14px!important;
  background:#e55353!important;
  color:white!important;
  font-size:19px!important;
}

/* Запись голоса: не красная тревога, а мягкий оранжевый режим */
.mic-btn.recording,
.send-actions #micBtn.recording{
  background:linear-gradient(135deg,#f2a94b,#e58a25)!important;
  color:#fff!important;
  animation:micPulse 1s infinite;
}

body:not(.has-input) .send-actions #micBtn.recording{
  font-size:16px!important;
}

/* Настройки: аккуратные подписи */
.settings-row span{
  font-size:15px!important;
}

.settings-row select{
  line-height:1.25!important;
}

/* === VOICE SETTINGS HISTORY POLISH END === */


/* === VRAM SLEEP RETURN PATCH START === */

/* Если VRAM опустела, трактор должен вернуться даже в рабочем режиме */
body.vram-model-sleeping .model-box{
  display:block!important;
  margin:6px 0!important;
  padding:8px!important;
  border-radius:14px!important;
  background:var(--panel-glass,var(--panel))!important;
  border:1px solid var(--border)!important;
  box-shadow:var(--shadow,0 8px 22px rgba(30,100,60,.12))!important;
}

body.vram-model-sleeping .model-box.no-start-buttons,
.model-box.no-start-buttons{
  display:none!important;
}

body.vram-model-sleeping .model-box-split {
  display: flex !important;
}

/* Если модель снова уснула во время работы — даём место блоку завода */
body.chat-active.vram-model-sleeping .app{
  padding-top:6px!important;
}

/* Но заголовок Chat ЖПТ не возвращаем в рабочем режиме */
body.chat-active.vram-model-sleeping h1{
  display:none!important;
}

/* === VRAM SLEEP RETURN PATCH END === */


/* === DEBUG CANCEL SPEECH UI PATCH START === */

.debug-log-btn-pro{
  width:100%!important;
  height:46px!important;
  border-radius:14px!important;
  border:1px solid var(--border)!important;
  background:var(--panel-soft)!important;
  color:var(--text)!important;
  padding:0 12px!important;
  font-size:16px!important;
  font-weight:700!important;
  cursor:pointer;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  transition:background .2s;
  box-shadow:none!important;
}

.debug-log-btn-pro:hover{
  background:var(--border)!important;
}

.cancel-gen-btn {
  position: absolute !important;
  top: 8px !important;
  right: 48px !important;
  z-index: 10 !important;
  display: none !important;
  width: 96px !important;
  height: 32px !important;
  border-radius: 10px !important;
  background: rgba(116, 78, 82, 0.28) !important;
  color: rgba(224, 171, 175, 0.94) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  box-shadow: none !important;
  border: 1px solid rgba(205, 145, 150, 0.34) !important;
  padding: 2px 4px !important;
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0 !important;
}

:root[data-theme="light"] .cancel-gen-btn {
  background: rgba(160, 104, 109, 0.1) !important;
  color: #a45f65 !important;
  border-color: rgba(160, 104, 109, 0.25) !important;
  box-shadow: none !important;
}

.cancel-gen-btn:hover {
  background: rgba(150, 96, 101, 0.36) !important;
  border-color: rgba(215, 157, 162, 0.48) !important;
  color: #edbec1 !important;
}

:root[data-theme="light"] .cancel-gen-btn:hover {
  background: rgba(160, 104, 109, 0.16) !important;
  border-color: rgba(160, 104, 109, 0.4) !important;
  color: #8f4f55 !important;
}

body.generating .cancel-gen-btn{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

body.generating .textarea-wrapper textarea{
  padding-right:154px!important;
}

.bubble-speech-controls{
  display:flex!important;
  width:100%!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:6px!important;
  margin-top:10px!important;
}

.mini-speech-btn{
  width:auto!important;
  height:34px!important;
  min-height:34px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  font-size:13px!important;
  background:var(--panel-soft)!important;
  color:var(--text)!important;
  border:1px solid var(--border)!important;
  cursor:pointer;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-weight:700!important;
  transition:background .2s;
}

.mini-speech-btn:hover{
  background:var(--border)!important;
}

.mini-speech-btn.pause-btn{
  border-color:var(--accent)!important;
}

@media(max-width:700px){
  .mini-speech-btn{
    height:44px!important;
    min-height:44px!important;
    padding:0 16px!important;
    font-size:14px!important;
  }
}

.diag-modal{
  position:fixed;
  inset:0;
  z-index:220;
  background:rgba(0,0,0,.42);
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:0;
}

.diag-modal.hidden{
  display:none;
}

.diag-card{
  width:100%;
  height:100%;
  max-width:820px;
  background:var(--panel);
  color:var(--text);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.diag-head{
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  border-bottom:1px solid var(--border);
}

.diag-head strong{
  font-size:21px;
}

.diag-close{
  width:42px!important;
  height:42px!important;
  border-radius:50%!important;
  padding:0!important;
  background:#d8ded9!important;
  color:#3d4841!important;
  font-size:26px!important;
  box-shadow:none!important;
}

:root[data-theme="dark"] .diag-close{
  background:#3b4640!important;
  color:#dce8df!important;
}

.diag-actions{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
  padding:10px;
  border-bottom:1px solid var(--border);
  background:var(--panel);
}

.diag-actions button{
  height:40px!important;
  border-radius:13px!important;
  padding:0 8px!important;
  font-size:13px!important;
  font-weight:900!important;
}

.diag-list{
  flex:1;
  overflow:auto;
  padding:10px;
  background:var(--bg);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:12px;
  line-height:1.45;
  white-space:pre-wrap;
  word-break:break-word;
}

.diag-line{
  padding:7px 0;
  border-bottom:1px solid rgba(128,128,128,.16);
}

.diag-line.err{
  color:#d34848;
  font-weight:900;
}

.diag-line.ok{
  color:var(--accent);
}

/* Микрофон: когда поле заполнено, только иконка, без вылезающего слова */
body.has-input:not(.voice-recording) .send-actions #micBtn{
  font-size:20px!important;
  white-space:nowrap!important;
}

/* Во время записи кнопка микрофона становится большой и мягко-оранжевой */
body.voice-recording .send-actions #btn{
  display:none!important;
}

body.voice-recording .send-actions #micBtn{
  display:flex!important;
  width:100%!important;
  flex:1 1 100%!important;
  min-width:0!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:16px!important;
  white-space:nowrap!important;
  background:linear-gradient(135deg,#f2a94b,#e58a25)!important;
  color:#fff!important;
}

/* === DEBUG CANCEL SPEECH UI PATCH END === */

/* === DEVICES UI PATCH — SUPERSEDED BY UNIFIED PILL (see end of file) === */

/* Modal styles similar to settingsModal/diagModal */
.devices-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: rgba(0,0,0,.42);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 8px;
}

.devices-modal.hidden {
  display: none !important;
}

.devices-card {
  width: 100%;
  max-width: 620px;
  max-height: 86dvh;
  overflow: auto;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  margin-top: auto;
  margin-bottom: auto;
}

.devices-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

.devices-head strong {
  font-size: 22px;
}

.devices-close {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  font-size: 26px !important;
  background: transparent !important;
  border: none !important;
  color: var(--text) !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.devices-body {
  padding: 12px;
}

.devices-name-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-direction: column;
}

.devices-name-row span {
  font-size: 14px;
  font-weight: 700;
}

.devices-name-row input {
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-soft);
  color: var(--text);
  padding: 0 12px;
  font-size: 14px;
}

.devices-name-row button {
  height: 40px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  padding: 0 16px;
}

.devices-summary {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}

.devices-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.device-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: var(--panel-soft);
}

.device-item.active-self {
  border-color: var(--accent) !important;
  background: rgba(255, 60, 0, 0.05) !important;
}

.device-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.device-item-name {
  font-weight: 700;
  font-size: 15px;
}

.device-badge-active {
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 8px;
  text-transform: uppercase;
}

.device-item-id {
  font-family: monospace;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
  word-break: break-all;
}

.device-item-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  font-size: 12px;
}

.device-info-cell {
  display: flex;
  flex-direction: column;
}

.device-info-label {
  color: var(--muted);
  font-size: 10px;
  margin-bottom: 1px;
}

.device-info-val {
  font-weight: 500;
  word-break: break-all;
}

.device-info-val.ok {
  color: #88ff88;
}

.device-info-val.err {
  color: #ff8888;
}

.devices-events-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}

.devices-events {
  font-family: monospace;
  font-size: 11px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  max-height: 180px;
  overflow-y: auto;
  white-space: pre-wrap;
}

.device-event-line {
  margin-bottom: 4px;
  border-bottom: 1px dashed rgba(128,128,128,.15);
  padding-bottom: 2px;
}

.device-event-line.err {
  color: #ff8888;
}

.device-event-line.ok {
  color: #88ff88;
}

@media(max-width:700px){
  .devices-modal {
    padding: 6px;
  }
  .devices-card {
    border-radius: 16px;
  }
  body.chat-active .chat-actions {
    right: 122px !important;
  }
  body.chat-active .mini-action-btn {
    min-width: 58px !important;
    height: 30px !important;
    font-size: 11px !important;
    padding: 0 6px !important;
  }
}
/* === DEVICES UI PATCH END === */

/* === SYSTEM STATUS HEADER AND LAYOUT REFACTOR START === */

.app-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
  margin-bottom: 6px !important;
  z-index: 100 !important;
}

.header-left {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.header-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.header-center h1.brand-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 26px !important;
  line-height: 1.1 !important;
  display: flex !important;
  align-items: center !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.header-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

/* ══════════════════════════════════════════
   ЕДИНАЯ ПИЛЮЛЯ: [●  57%  |  👥 2]
   Левая часть: dot + текст + бар снизу
   Разделитель вертикальный
   Правая часть: иконка + число
   ══════════════════════════════════════════ */
.status-pill {
  display: inline-flex !important;
  align-items: stretch !important;
  height: 40px !important;
  border-radius: 20px !important;
  background: rgba(28, 40, 32, 0.80) !important;
  border: 1px solid rgba(87, 189, 130, 0.28) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.22) !important;
  overflow: hidden !important;
  backdrop-filter: blur(8px) !important;
}

:root[data-theme="light"] .status-pill {
  background: rgba(215, 242, 224, 0.85) !important;
  border: 1px solid rgba(47, 168, 102, 0.28) !important;
}

/* Левая кнопка — сервер/VRAM */
.server-btn {
  position: relative !important;
  top: auto !important; left: auto !important;
  z-index: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 3px !important;
  /* ~60-70% ширины пилюли */
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  height: 100% !important;
  padding: 6px 10px 6px 10px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  box-sizing: border-box !important;
}

.server-btn:hover {
  background: rgba(255,255,255,0.06) !important;
}

/* Верхняя строка: dot + текст */
.server-pill-top {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  width: 100% !important;
}

/* Цветной индикатор статуса */
.server-dot {
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #31c96d !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 5px rgba(49,201,109,0.6) !important;
}

.server-btn.busy    .server-dot { background: #f5b942 !important; box-shadow: 0 0 5px rgba(245,185,66,0.6) !important; }
.server-btn.critical .server-dot { background: #e84040 !important; box-shadow: 0 0 5px rgba(232,64,64,0.6) !important; }

/* Текст процента */
#serverShortText {
  display: block !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #8fffc0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

:root[data-theme="light"] #serverShortText { color: #156b38 !important; }
.server-btn.busy    #serverShortText { color: #ffd060 !important; }
.server-btn.critical #serverShortText { color: #ff7070 !important; }

/* Прогресс-бар — на всю ширину под текстом */
.server-mini-bar {
  display: block !important;
  width: 100% !important;
  height: 3px !important;
  background: rgba(255,255,255,0.10) !important;
  border-radius: 99px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

:root[data-theme="light"] .server-mini-bar { background: rgba(0,0,0,0.10) !important; }

#serverMiniFill {
  display: block !important;
  height: 100% !important;
  width: 0% !important;
  background: linear-gradient(90deg, #42d978, #1faa55) !important;
  border-radius: 99px !important;
  transition: width 0.4s ease !important;
}

.server-btn.busy    #serverMiniFill { background: linear-gradient(90deg, #f5c842, #c98a0a) !important; }
.server-btn.critical #serverMiniFill { background: linear-gradient(90deg, #f05555, #c02020) !important; }

/* Вертикальный разделитель */
.status-divider {
  width: 1px !important;
  height: 22px !important;
  background: rgba(255,255,255,0.14) !important;
  align-self: center !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

:root[data-theme="light"] .status-divider { background: rgba(0,0,0,0.14) !important; }

/* Правая кнопка — устройства */
.devices-btn {
  position: relative !important;
  top: auto !important; right: auto !important;
  z-index: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  width: auto !important;
  min-width: 42px !important;
  max-width: none !important;
  height: 100% !important;
  padding: 0 10px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.devices-btn:hover { background: rgba(255,255,255,0.06) !important; }

/* ── История и настройки — круглые кнопки ── */
.history-btn,
.settings-btn {
  position: relative !important;
  top: auto !important; left: auto !important; right: auto !important;
  margin: 0 !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  background: rgba(28, 40, 32, 0.80) !important;
  color: var(--text) !important;
  border: 1px solid rgba(87, 189, 130, 0.28) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.22) !important;
  cursor: pointer !important;
  backdrop-filter: blur(8px) !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
}

:root[data-theme="light"] .history-btn,
:root[data-theme="light"] .settings-btn {
  background: rgba(215, 242, 224, 0.85) !important;
  border: 1px solid rgba(47, 168, 102, 0.28) !important;
}

.history-btn:hover,
.settings-btn:hover {
  transform: scale(1.08) !important;
  background: rgba(40, 60, 46, 0.90) !important;
}

/* ── Чат-контейнер ── */
.chat-container {
  position: relative !important;
  flex: 1 !important;
  min-height: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.new-chat-btn {
  position: absolute !important;
  top: 10px !important; right: 10px !important;
  z-index: 10 !important;
  width: 44px !important; min-width: 44px !important; max-width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(40, 48, 43, 0.5) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  transition: all 0.2s ease !important;
}

:root[data-theme="light"] .new-chat-btn {
  background: rgba(255, 255, 255, 0.5) !important;
}

.new-chat-btn:hover {
  background: var(--accent) !important;
  color: white !important;
  transform: scale(1.05) !important;
}

/* ── Правила видимости ── */
body.chat-active .brand-title      { display: none !important; }
body.chat-active .app              { padding-top: 6px !important; }
body:not(.chat-active) #newChatBtn { display: none !important; }
.theme-btn, .chat-actions          { display: none !important; }

/* ── Адаптив ── */
@media(max-width: 380px) {
  .app-header                    { height: 46px !important; padding: 0 2px !important; }
  .status-pill                   { height: 36px !important; }
  .server-btn                    { width: 68px !important; min-width: 68px !important; padding: 5px 8px !important; }
  #serverShortText               { font-size: 11px !important; }
  .devices-btn                   { min-width: 36px !important; padding: 0 7px !important; font-size: 12px !important; }
  .history-btn, .settings-btn    { width: 36px !important; min-width: 36px !important; height: 36px !important; font-size: 16px !important; }
  .header-center h1.brand-title  { font-size: 20px !important; }
}

/* === SYSTEM STATUS HEADER AND LAYOUT REFACTOR END === */

/* === FINAL SINGLE STATUS PILL === */

.app-header .status-pill {
  display: inline-flex !important;
  align-items: center !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(28, 40, 32, 0.88) !important;
  border: 1px solid rgba(87, 189, 130, 0.32) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.22) !important;
}

.app-header .status-pill-metrics {
  max-width: min(100%, 312px) !important;
}

.app-header .status-pill-part,
.app-header .server-btn,
.app-header .devices-btn {
  position: static !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 10px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text, #eee) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.app-header .status-pill-server {
  min-width: 48px !important;
  padding: 0 6px !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.app-header .status-pill-metric {
  min-width: 48px !important;
  padding: 0 6px !important;
  flex-direction: column !important;
  gap: 2px !important;
  justify-content: center !important;
}

.app-header .status-pill-devices {
  gap: 5px !important;
}

.app-header .metric-label {
  display: block !important;
  color: #ffffff !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.03em !important;
}

.app-header .metric-value {
  display: block !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  min-width: 3ch !important;
  text-align: center !important;
  color: #ffffff !important;
}

.app-header #serverShortText {
  display: block !important;
  font-size: 12px !important;
  line-height: 1 !important;
  color: #ffffff !important;
}

.app-header .server-btn.normal #serverShortText,
.app-header .status-pill-metric.normal .metric-value {
  color: #8fffc0 !important;
}

.app-header .server-btn.busy #serverShortText,
.app-header .server-btn.warn #serverShortText,
.app-header .status-pill-metric.warn .metric-value {
  color: #ffd060 !important;
}

.app-header .server-btn.critical #serverShortText,
.app-header .server-btn.danger #serverShortText,
.app-header .status-pill-metric.danger .metric-value {
  color: #ff7070 !important;
}

.app-header .server-btn.idle #serverShortText,
.app-header .status-pill-metric.idle .metric-value {
  color: #ffffff !important;
}

.app-header .status-divider {
  width: 1px !important;
  height: 18px !important;
  min-width: 1px !important;
  background: rgba(255,255,255,0.18) !important;
  flex: 0 0 1px !important;
}

.app-header #serverShortText,
.app-header #devicesCount,
.app-header .devices-icon {
  display: inline-block !important;
  line-height: 1 !important;
}

@media (max-width: 700px) {
  .app-header .status-pill {
    height: 32px !important;
  }

  .app-header .status-pill-metrics {
    max-width: min(100%, 248px) !important;
  }

  .app-header .status-pill-part,
  .app-header .server-btn,
  .app-header .devices-btn {
    width: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }

  .app-header .status-pill-metric {
    min-width: 43px !important;
    padding: 0 5px !important;
  }

  .app-header .status-pill-server {
    min-width: 43px !important;
    padding: 0 5px !important;
  }

  .app-header .metric-label {
    font-size: 7px !important;
  }

  .app-header .metric-value,
  .app-header #serverShortText {
    font-size: 12px !important;
  }
}

/* === FINAL SINGLE STATUS PILL END === */

/* === MODEL SELECTOR & DIAGNOSTICS START === */
/* === MODEL SWITCHER MODAL === */
.model-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 8px;
}

.model-modal.hidden {
  display: none !important;
}

.model-card {
  width: 100%;
  max-width: 620px;
  max-height: 86dvh;
  overflow: auto;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}

.model-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

.model-head strong {
  font-size: 16px;
  font-weight: bold;
}

.model-close {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  padding: 0;
  font-size: 26px;
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.model-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.model-selector-buttons {
  display: flex;
  gap: 8px;
  width: 100%;
}

.model-option-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 6px;
}

.model-option-desc {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  opacity: 0.85;
  line-height: 1.25;
}

.model-select-btn {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--text) !important;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

:root[data-theme="light"] .model-select-btn {
  background: rgba(0, 0, 0, 0.03) !important;
}

.model-select-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.08) !important;
}

:root[data-theme="light"] .model-select-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06) !important;
}

.model-select-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.model-select-btn.active {
  background: var(--accent) !important;
  color: #ffffff !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 10px rgba(47, 168, 102, 0.4) !important;
}

.model-select-btn.loading {
  background: #ffd060 !important;
  color: #222 !important;
  border-color: #ffd060 !important;
  animation: pulse-loading-model 1.5s infinite alternate !important;
  cursor: wait;
}

@keyframes pulse-loading-model {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}

.model-status-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.15);
  font-size: 12px;
}

:root[data-theme="light"] .model-status-info {
  background: rgba(0, 0, 0, 0.04);
}

.model-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
}

.model-status-row strong {
  color: var(--text);
  font-weight: 700;
}

/* Diagnostic stats styling in diagModal */
.diag-model-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  font-size: 12px;
}

:root[data-theme="light"] .diag-model-stats {
  background: rgba(0, 0, 0, 0.02);
}

.diag-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}

:root[data-theme="light"] .diag-stat-row {
  border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
}

.diag-stat-row:last-child {
  border-bottom: none;
}

.diag-stat-row span {
  color: var(--muted);
}

.diag-stat-row strong {
  color: var(--text);
}

.unload-models-btn {
  width: 100% !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  border: 1px dashed rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
  margin-top: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

:root[data-theme="light"] .unload-models-btn {
  border: 1px dashed rgba(0, 0, 0, 0.12) !important;
  background: rgba(0, 0, 0, 0.01) !important;
}

.unload-models-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--text) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

:root[data-theme="light"] .unload-models-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.25) !important;
}

.unload-models-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.unload-models-btn.loading {
  animation: pulse-loading-model 1.5s infinite alternate !important;
  cursor: wait !important;
}
/* === MODEL SELECTOR & DIAGNOSTICS END === */

/* === MODAL CLOSE BUTTONS POLISH === */
.settings-close,
.server-close,
.devices-close,
.diag-close,
.model-close,
.history-close {
  background: transparent !important;
  color: var(--text) !important;
  border: 0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.settings-close:hover,
.server-close:hover,
.devices-close:hover,
.diag-close:hover,
.model-close:hover,
.history-close:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--accent) !important;
}

:root[data-theme="light"] .settings-close:hover,
:root[data-theme="light"] .server-close:hover,
:root[data-theme="light"] .devices-close:hover,
:root[data-theme="light"] .diag-close:hover,
:root[data-theme="light"] .model-close:hover,
:root[data-theme="light"] .history-close:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--accent) !important;
}


/* === CHAT SETTINGS MODAL STYLES START === */

.chat-settings-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 110;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 10px;
}

.chat-settings-modal.hidden {
  display: none;
}

.chat-settings-card {
  width: 100%;
  max-width: 680px;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.chat-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--panel);
}

.chat-settings-head strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.chat-settings-close {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  font-size: 20px !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  border: none !important;
  cursor: pointer;
  line-height: 1 !important;
}

.chat-settings-close:hover {
  background: rgba(128, 128, 128, 0.15) !important;
  color: var(--accent) !important;
}

.chat-settings-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}

.chat-settings-section {
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.chat-settings-section-title {
  background: var(--panel-soft, rgba(128, 128, 128, 0.08));
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.chat-settings-field {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.chat-settings-field:last-child {
  border-bottom: none;
}

.chat-settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chat-settings-toggle-row > div {
  flex: 1;
}

.chat-settings-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.chat-settings-hint {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 5px;
}

.chat-settings-textarea {
  width: 100% !important;
  min-height: 72px !important;
  resize: vertical !important;
  background: var(--bubble-ai) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 10px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  line-height: 1.45 !important;
  box-sizing: border-box !important;
}

.chat-settings-textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(47, 168, 102, 0.12) !important;
}

.chat-settings-input {
  width: 140px !important;
  background: var(--bubble-ai) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  height: 38px !important;
}

.chat-settings-input:focus {
  outline: none !important;
  border-color: var(--accent) !important;
}

.chat-settings-select {
  width: 100% !important;
  max-width: 280px !important;
  background: var(--bubble-ai) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  height: 38px !important;
}

.chat-settings-select:focus {
  outline: none !important;
  border-color: var(--accent) !important;
}

/* Range slider */
.chat-settings-range {
  width: 100% !important;
  height: 5px !important;
  appearance: none !important;
  background: var(--border) !important;
  border-radius: 999px !important;
  outline: none !important;
  cursor: pointer !important;
  border: none !important;
  padding: 0 !important;
  margin: 8px 0 4px !important;
}

.chat-settings-range::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(47, 168, 102, 0.35);
}

.chat-settings-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

.cs-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 2px;
}

/* Toggle switch */
.cs-toggle {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
  cursor: pointer;
}

.cs-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.cs-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 999px;
  transition: background 0.2s;
}

.cs-toggle-slider::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.cs-toggle input:checked + .cs-toggle-slider {
  background: var(--accent);
}

.cs-toggle input:checked + .cs-toggle-slider::before {
  transform: translateX(20px);
}

/* Footer */
.chat-settings-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--panel);
  gap: 8px;
}

.cs-footer-right {
  display: flex;
  gap: 8px;
}

.cs-btn {
  height: 40px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  border: 1px solid transparent !important;
  width: auto !important;
}

.cs-btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(47, 168, 102, 0.28) !important;
}

.cs-btn-primary:hover:not(:disabled) {
  background: var(--accent-hover, #23844f) !important;
  box-shadow: 0 6px 18px rgba(47, 168, 102, 0.38) !important;
  transform: translateY(-1px);
}

.cs-btn-cancel {
  background: transparent !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
}

.cs-btn-cancel:hover {
  background: var(--panel-soft) !important;
  color: var(--text) !important;
}

.cs-btn-secondary {
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  border-color: var(--border) !important;
}

.cs-btn-secondary:hover {
  color: var(--text) !important;
  border-color: var(--muted) !important;
}

/* Status messages */
.chat-settings-msg {
  margin: 0 16px 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
}

.chat-settings-msg.hidden {
  display: none;
}

.chat-settings-msg-ok {
  background: rgba(47, 168, 102, 0.12);
  color: var(--accent);
  border: 1px solid rgba(47, 168, 102, 0.25);
}

.chat-settings-msg-error {
  background: rgba(224, 49, 49, 0.1);
  color: #e03131;
  border: 1px solid rgba(224, 49, 49, 0.22);
}

@media (max-width: 700px) {
  .chat-settings-card {
    max-height: 94dvh;
    border-radius: 20px 20px 0 0;
  }

  .chat-settings-footer {
    flex-wrap: wrap;
  }

  .cs-btn-secondary {
    width: 100% !important;
    order: 2;
  }

  .cs-footer-right {
    width: 100%;
    order: 1;
  }

  .cs-btn-primary,
  .cs-btn-cancel {
    flex: 1;
  }
}

/* === CHAT SETTINGS MODAL STYLES END === */

/* === MODEL CONFIGURATION & LAUNCH SETTINGS MODAL STYLES === */
.model-settings-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 110;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 10px;
}

.model-settings-modal.hidden {
  display: none;
}

.model-settings-card {
  width: 100%;
  max-width: 760px; /* Slightly wider to accommodate complex inputs */
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.model-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--panel);
}

.model-settings-head strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.model-settings-close {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  font-size: 20px !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  border: none !important;
  cursor: pointer;
  line-height: 1 !important;
}

.model-settings-close:hover {
  background: rgba(128, 128, 128, 0.15) !important;
  color: var(--accent) !important;
}

.model-settings-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}

.model-settings-section {
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.model-settings-section-title {
  background: var(--panel-soft, rgba(128, 128, 128, 0.08));
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.model-settings-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}

/* Individual model config card inside settings */
.model-config-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

:root[data-theme="light"] .model-config-card {
  background: rgba(0, 0, 0, 0.01);
}

.model-config-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 8px;
  margin-bottom: 4px;
}

:root[data-theme="light"] .model-config-card-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.model-config-card-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.model-config-status-badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.model-status-badge-loaded {
  background: rgba(49, 201, 109, 0.15);
  color: #31c96d;
  border: 1px solid rgba(49, 201, 109, 0.3);
}

.model-status-badge-unloaded {
  background: rgba(128, 128, 128, 0.12);
  color: var(--muted);
  border: 1px solid rgba(128, 128, 128, 0.2);
}

.model-status-badge-unavailable {
  background: rgba(232, 64, 64, 0.12);
  color: #ff5555;
  border: 1px solid rgba(232, 64, 64, 0.25);
}

.model-status-badge-error {
  background: rgba(245, 185, 66, 0.12);
  color: #ffd060;
  border: 1px solid rgba(245, 185, 66, 0.25);
}

.model-config-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.model-config-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.model-config-field-full {
  grid-column: span 2;
}

.model-config-input {
  width: 100% !important;
  background: var(--bubble-ai) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-size: 13px !important;
  height: 36px !important;
  box-sizing: border-box !important;
}

.model-config-textarea {
  width: 100% !important;
  min-height: 52px !important;
  resize: vertical !important;
  background: var(--bubble-ai) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-size: 13px !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
}

.model-config-toggles-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
  grid-column: span 2;
}

.model-config-toggle-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
}

.model-config-card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
  gap: 8px;
}

:root[data-theme="light"] .model-config-card-actions {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.model-config-actions-left {
  display: flex;
  gap: 6px;
}

.model-config-btn {
  height: 32px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border: 1px solid var(--border) !important;
  background: transparent !important;
  color: var(--text) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}

.model-config-btn:hover {
  background: var(--panel-soft) !important;
  border-color: var(--muted) !important;
}

.model-config-btn-danger {
  color: #ff5555 !important;
  border-color: rgba(255, 85, 85, 0.3) !important;
}

.model-config-btn-danger:hover {
  background: rgba(255, 85, 85, 0.08) !important;
  border-color: #ff5555 !important;
}

.model-config-btn-primary {
  background: var(--accent) !important;
  color: white !important;
  border-color: var(--accent) !important;
}

.model-config-btn-primary:hover {
  background: var(--accent-hover, #23844f) !important;
}

.model-settings-actions-row {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: center;
}

.model-settings-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--panel);
}

.model-settings-msg {
  margin: 0 16px 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
}

.model-settings-msg.hidden {
  display: none;
}

.model-settings-msg-ok {
  background: rgba(47, 168, 102, 0.12);
  color: var(--accent);
  border: 1px solid rgba(47, 168, 102, 0.25);
}

.model-settings-msg-error {
  background: rgba(224, 49, 49, 0.1);
  color: #e03131;
  border: 1px solid rgba(224, 49, 49, 0.22);
}

.model-settings-warning {
  color: #ffd060;
  font-size: 12px;
  margin-top: 5px;
  font-weight: 500;
}

.model-settings-warning.hidden {
  display: none;
}

.model-config-error-text {
  font-size: 12px;
  color: #ff8888;
  margin-top: 2px;
  grid-column: span 2;
  word-break: break-word;
}

@media (max-width: 700px) {
  .model-settings-card {
    max-height: 94dvh;
    border-radius: 20px 20px 0 0;
  }
  .model-config-grid {
    grid-template-columns: 1fr;
  }
  .model-config-field-full {
    grid-column: span 1;
  }
  .model-config-toggles-row {
    grid-column: span 1;
    flex-direction: column;
    gap: 8px;
  }
  .model-config-error-text {
    grid-column: span 1;
  }
}
/* === MODEL CONFIGURATION & LAUNCH SETTINGS MODAL STYLES END === */

/* === HEADER RIGHT CONTROL PILL OVERRIDES === */
:root .app-header .status-pill .history-btn,
:root .app-header .status-pill .settings-btn {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  padding: 0 12px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text, #eee) !important;
  font-size: 15px !important;
  cursor: pointer !important;
  backdrop-filter: none !important;
  transition: background 0.15s ease !important;
  transform: none !important;
}

:root .app-header .status-pill .history-btn:hover,
:root .app-header .status-pill .settings-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  transform: none !important;
}

:root[data-theme="light"] .app-header .status-pill .history-btn:hover,
:root[data-theme="light"] .app-header .status-pill .settings-btn:hover {
  background: rgba(0, 0, 0, 0.06) !important;
}

@media (max-width: 700px) {
  :root .app-header .status-pill .history-btn,
  :root .app-header .status-pill .settings-btn {
    padding: 0 10px !important;
    font-size: 13px !important;
  }
}

/* === INPUT AREA EXPANSION STYLES === */
.input-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 900 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease !important;
}

.input-backdrop.active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.input.expanded {
  position: fixed !important;
  top: max(8px, env(safe-area-inset-top)) !important;
  bottom: var(--input-expanded-bottom-offset, 0px) !important;
  left: 50% !important;
  transform: translate(-50%, 0) !important;
  width: 96% !important;
  max-width: 900px !important;
  height: auto !important;
  max-height: none !important;
  z-index: 1000 !important;
  border-radius: 24px 24px 0 0 !important;
  padding: 16px !important;
  padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4) !important;
  animation: inputSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
}

@keyframes inputSlideUp {
  from {
    transform: translate(-50%, 100%) !important;
  }
  to {
    transform: translate(-50%, 0) !important;
  }
}

/* Header inside input (only visible when expanded) */
.input-header {
  display: none;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.input.expanded .input-header {
  display: flex !important;
}

.input-header-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
}

/* Container wrapping textarea and the expand button */
.textarea-wrapper {
  position: relative !important;
  flex: 1 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  min-height: 0 !important;
}

.textarea-wrapper textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Expand button: clean, small, translucent icon in the top right corner */
.input-expand-btn {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 10 !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: var(--text) !important;
  font-size: 14px !important;
  font-weight: normal !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
}

.input-expand-btn:hover {
  background: rgba(255, 255, 255, 0.20) !important;
  transform: scale(1.05) !important;
}

:root[data-theme="light"] .input-expand-btn {
  background: rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
}

:root[data-theme="light"] .input-expand-btn:hover {
  background: rgba(0, 0, 0, 0.10) !important;
}

/* Single icon inside the toggle button */
.input-expand-btn .input-expand-icon {
  display: block !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

.input.expanded .input-expand-btn {
  display: flex !important;
}
.input.expanded .input-expand-btn .input-expand-icon {
  font-size: 20px !important;
}

/* Expanded textarea */
.input.expanded textarea {
  flex: 1 !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  resize: none !important;
  font-size: 17px !important;
  padding: 16px !important;
  margin-bottom: 0 !important;
  overflow: auto !important;
}

@media (max-width: 700px) {
  .input.expanded {
    width: 100% !important;
    top: max(0px, env(safe-area-inset-top)) !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 12px !important;
  }
}

/* Expanded send button: full width at the bottom */
.input.expanded #btn,
.input.expanded button#btn {
  width: 100% !important;
  flex: 0 0 auto !important;
  height: 48px !important;
}

/* Expanded textarea wrapper: fill remaining space */
.input.expanded .textarea-wrapper {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.input.expanded .send-actions {
  margin-top: 0 !important;
}

/* === SHORT ANSWER SPLIT BUTTON START === */
.send-submit-group{
  display:none;
  min-width:0;
  overflow:hidden;
  border-radius:18px;
  background:linear-gradient(135deg,var(--accent),var(--accent-hover));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 8px 20px rgba(47,168,102,.24),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.12);
}

body.has-input .send-submit-group{
  display:flex;
  flex:1 1 75%;
}

.send-submit-group #shortBtn,
.send-submit-group #btn{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:0!important;
  height:52px!important;
  min-height:52px!important;
  margin:0!important;
  padding:0 8px!important;
  border-radius:0!important;
  background:transparent!important;
  color:#fff!important;
  border:0!important;
  box-shadow:none!important;
  font-weight:900!important;
  text-shadow:0 1px 1px rgba(0,0,0,.16);
}

.send-submit-group #shortBtn{
  flex:0 0 35%!important;
  position:relative;
  font-size:15px!important;
}

.send-submit-group #shortBtn::after{
  content:"";
  position:absolute;
  top:9px;
  right:0;
  bottom:9px;
  width:2px;
  background:linear-gradient(
    to right,
    rgba(0,0,0,.22),
    rgba(255,255,255,.48)
  );
  border-radius:999px;
  opacity:.82;
  pointer-events:none;
}

.send-submit-group #btn{
  flex:1 1 65%!important;
  font-size:18px!important;
}

.send-submit-group #shortBtn:hover,
.send-submit-group #btn:hover{
  background:rgba(255,255,255,.08)!important;
}

.send-submit-group #shortBtn:disabled,
.send-submit-group #btn:disabled{
  opacity:.55!important;
}

body:not(.has-input) .send-submit-group,
body.voice-recording .send-submit-group{
  display:none!important;
}

.input.expanded .send-submit-group{
  width:100%!important;
  flex:1 1 75%!important;
}

@media(max-width:380px){
  .send-submit-group #shortBtn{
    font-size:13px!important;
    padding:0 5px!important;
  }
}
/* === SHORT ANSWER SPLIT BUTTON END === */

/* === SIMPLE ADMIN PIN START === */
.settings-section-title{
  margin:2px 0 12px;
  color:var(--muted);
  font-size:13px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.admin-settings-section{
  margin:18px 0 14px;
  padding-top:14px;
  border-top:1px solid var(--border);
}

.admin-settings-locked{
  padding:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--panel-soft);
}

.admin-settings-lock-text{
  margin-bottom:12px;
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}

.admin-unlock-btn,
.admin-change-pin-btn{
  width:100%!important;
  min-height:44px!important;
  padding:0 14px!important;
  border-radius:12px!important;
  font-size:15px!important;
}

.admin-change-pin-btn{
  background:transparent!important;
  color:var(--muted)!important;
  border:1px solid var(--border)!important;
}

.admin-settings-actions.hidden,
.admin-settings-locked.hidden{
  display:none!important;
}

.admin-pin-modal{
  position:fixed;
  inset:0;
  z-index:360;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(6px);
}

.admin-pin-modal.hidden{
  display:none!important;
}

.admin-pin-card{
  width:100%;
  max-width:420px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--panel);
  color:var(--text);
  box-shadow:0 22px 70px rgba(0,0,0,.3);
}

.admin-pin-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
}

.admin-pin-head strong{
  font-size:20px;
}

.admin-pin-close{
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
  padding:0!important;
  border-radius:50%!important;
  background:transparent!important;
  color:var(--muted)!important;
  font-size:24px!important;
}

.admin-pin-body{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px;
}

.admin-pin-description,
.admin-pin-hint{
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}

.admin-pin-input{
  width:100%;
  height:50px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:12px;
  outline:none;
  background:var(--panel-soft);
  color:var(--text);
  font-size:20px;
  letter-spacing:.12em;
}

.admin-pin-input:focus{
  border-color:var(--accent);
}

.admin-pin-input.hidden,
.admin-pin-error.hidden{
  display:none!important;
}

.admin-pin-error{
  padding:10px 12px;
  border:1px solid rgba(224,49,49,.3);
  border-radius:10px;
  background:rgba(224,49,49,.08);
  color:#e03131;
  font-size:13px;
  font-weight:700;
}

.admin-pin-submit{
  width:100%!important;
  height:50px!important;
  border-radius:14px!important;
  font-size:17px!important;
}

@media(max-width:700px){
  .admin-pin-modal{
    align-items:flex-end;
    padding:8px;
  }

  .admin-pin-card{
    border-radius:20px 20px 12px 12px;
  }
}
/* === SIMPLE ADMIN PIN END === */