/* Patch 3: finale UI-/Mobile-Stabilisierung
   Ziel: keine Backend-Logik verändern; nur sichere Layout-, Lesbarkeits- und Responsiveness-Overrides. */
:root {
  --sai-control-bg: rgba(7, 14, 28, .86);
  --sai-control-bg-focus: rgba(10, 22, 42, .96);
  --sai-control-border: rgba(148, 180, 220, .36);
  --sai-control-border-focus: rgba(116, 185, 255, .74);
  --sai-control-text: rgba(246, 250, 255, .96);
  --sai-control-muted: rgba(210, 224, 242, .72);
}

html, body {
  max-width: 100%;
  overflow-x: hidden !important;
}

*, *::before, *::after { box-sizing: border-box; }
img, video, canvas, svg { max-width: 100%; height: auto; }

/* Einheitliche, lesbare Formularfelder in Portal, Admin, Registrierung und Modals. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
textarea,
select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  color: var(--sai-control-text) !important;
  background: var(--sai-control-bg) !important;
  border: 1px solid var(--sai-control-border) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
  caret-color: #dff7ff;
}
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(230,242,255,.9) 50%),
    linear-gradient(135deg, rgba(230,242,255,.9) 50%, transparent 50%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) !important;
  background-position:
    calc(100% - 23px) 50%,
    calc(100% - 17px) 50%,
    100% 0 !important;
  background-size: 6px 6px, 6px 6px, 38px 100% !important;
  background-repeat: no-repeat !important;
}
select option,
select optgroup {
  color: #111827 !important;
  background: #f8fafc !important;
}
input:focus, textarea:focus, select:focus {
  background: var(--sai-control-bg-focus) !important;
  border-color: var(--sai-control-border-focus) !important;
  box-shadow: 0 0 0 4px rgba(116,185,255,.16), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
input::placeholder, textarea::placeholder { color: rgba(210,224,242,.54) !important; }
label, .sai-field-label { color: var(--sai-control-muted) !important; }

/* Chat-Hauptlayout: lange Namen/Status nie abschneiden lassen und keine Horizontal-Scrollbars erzeugen. */
.unified-comm,
.unified-sidebar,
.unified-main,
.unified-main-head,
.unified-head,
.unified-title-btn,
.unified-entry,
.unified-messages,
.unified-compose,
#hubCommunicationPanel,
#communicationPanel,
#saiChatPanel,
#sai2GroupsPanel {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}
.unified-main-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}
.unified-title-btn {
  width: 100% !important;
  padding: 2px 0 !important;
  overflow: hidden !important;
}
#unifiedTitle,
.unified-title-btn h3 {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.22 !important;
}
#unifiedSubtitle,
#unifiedInfoHint,
.unified-title-btn p,
.unified-entry small {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.25 !important;
}
.unified-entry {
  grid-template-columns: 42px minmax(0,1fr) max-content !important;
}
.unified-entry > span,
.unified-entry > div,
.unified-entry strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.unified-compose {
  grid-template-columns: minmax(0,1fr) auto minmax(0,160px) auto auto !important;
}
.unified-file-name {
  align-self: center;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.unified-message,
.gustav-stream-text,
.gustav-status-text,
.gustav-status-step p,
.gustav-status-step small {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Gustav: Thinking-Box stabilisieren, damit beim Aktualisieren keine Breiten-/Höhen-Sprünge entstehen. */
.unified-message.gustav-message.is-thinking {
  width: min(100%, 760px) !important;
  max-width: min(100%, 760px) !important;
  min-width: 0 !important;
  contain: layout paint;
  transform: none !important;
}
.unified-message.gustav-message.is-thinking,
.gustav-processing-shell,
.gustav-status-steps,
.gustav-stream-text {
  overflow-x: hidden !important;
}
.gustav-processing-shell {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.gustav-status-steps {
  max-height: min(260px, 38vh) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.gustav-status-step {
  min-width: 0 !important;
  position: relative;
}
.gustav-stream-text {
  max-height: min(260px, 42vh) !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
}

/* Modals und Popover bleiben innerhalb des Viewports. */
.modal,
#unifiedInfoModal,
#unifiedNewChatModal {
  overflow-x: hidden !important;
}
.modal-content,
.wide-modal,
.unified-info-modal .modal-content,
.header-popover,
.notification-popover,
.profile-popover,
.settings-popover {
  max-width: min(940px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
}
.header-popover {
  right: 0 !important;
  left: auto !important;
  width: min(420px, calc(100vw - 24px)) !important;
}
.notification-list,
.compact-list,
.summary-list {
  min-width: 0 !important;
}
.summary-item,
.notification-item,
.profile-row,
.settings-menu-item {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

/* Karten, Tabellen und Grids dürfen auf kleinen Bildschirmen nicht nach rechts drücken. */
.container,
.portal-grid,
.admin-grid,
.stats-grid,
.portal-card,
.stat-card,
.table-wrap,
.admin-table,
.task-layout-modern,
.files-shell,
.files-grid,
.files-toolbar,
.file-tile {
  min-width: 0 !important;
  max-width: 100% !important;
}
.table-wrap { overflow-x: auto !important; }
button, .button, .success-btn, .secondary-btn, .dark-btn, .danger-btn {
  max-width: 100%;
  white-space: normal;
}

/* Verwaltung/Admin/Statistik: zu helle Texte in Formular- und Kartenbereichen korrigieren. */
#teamManagementPanel,
#teamManagementPanel *,
#statsPanel,
#statsPanel *,
.admin-container,
.admin-container * {
  text-shadow: none;
}
#teamManagementPanel .subtle,
#statsPanel .subtle,
.admin-container .subtle {
  color: rgba(210,224,242,.72) !important;
}
#teamManagementPanel input,
#teamManagementPanel textarea,
#teamManagementPanel select,
#statsPanel input,
#statsPanel textarea,
#statsPanel select,
.admin-container input,
.admin-container textarea,
.admin-container select {
  color: var(--sai-control-text) !important;
}

@media (max-width: 900px) {
  .unified-comm { grid-template-columns: 1fr !important; min-height: auto !important; }
  .unified-sidebar, .unified-main { padding: 12px !important; border-radius: 20px !important; }
  .unified-list { max-height: 34vh !important; }
  .unified-messages { height: 50vh !important; min-height: 300px !important; }
  .unified-compose { grid-template-columns: minmax(0,1fr) auto auto !important; }
  .unified-file-name { grid-column: 1 / -1; max-width: 100% !important; }
  .unified-stop-gustav { grid-column: 1 / 2; }
  .unified-compose #unifiedSendBtn { grid-column: auto; }
  .portal-header, .admin-header { gap: 12px !important; }
  .portal-actions, .top-actions, .icon-toolbar { flex-wrap: wrap !important; }
}

@media (max-width: 640px) {
  .container { width: calc(100vw - 16px) !important; margin: 8px auto !important; padding: 12px !important; }
  .portal-brand-wrap { align-items: flex-start !important; min-width: 0 !important; }
  .portal-brand-text { min-width: 0 !important; }
  .portal-title, .admin-header h1 { overflow-wrap: anywhere !important; }
  .portal-subtitle { line-height: 1.35 !important; }
  .portal-nav, .admin-tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .nav-pill, .tab-btn { flex: 0 0 auto; }
  .section-header { gap: 8px !important; }
  .section-header > div, .section-header h3, .section-header p { min-width: 0 !important; max-width: 100% !important; }
  .unified-main-head { grid-template-columns: minmax(0,1fr) !important; }
  #unifiedTitle, .unified-title-btn h3 { white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  #unifiedSubtitle, #unifiedInfoHint { white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .unified-message { max-width: 94% !important; }
  .unified-compose { grid-template-columns: minmax(0,1fr) auto !important; align-items: center !important; }
  .unified-compose textarea { grid-column: 1 / -1; min-height: 68px !important; }
  .unified-paperclip, #unifiedSendBtn, #unifiedStopGustavBtn { min-height: 42px !important; }
  .modal-content, .wide-modal, .unified-info-modal .modal-content { width: calc(100vw - 16px) !important; max-height: calc(100dvh - 16px) !important; border-radius: 20px !important; }
  .admin-grid, .portal-grid, .stats-grid, .task-layout-modern { grid-template-columns: 1fr !important; }
  .admin-table { min-width: 620px; }
}

@media (prefers-reduced-motion: reduce) {
  .unified-message.gustav-message.is-thinking,
  .gustav-status-step.active span,
  .gustav-progress-bar,
  .gustav-processing-shell::before,
  .ui-reveal {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* Final-Fix: Chat-Header/Optionsmenüs dürfen nicht vom Chat-Scrollcontainer abgeschnitten werden. */
.unified-shell,
.unified-comm,
.unified-main,
.unified-main-head,
.unified-head,
.unified-title-btn,
.unified-actions,
.unified-gustav-menu-wrap,
.chat-header,
.chat-container,
.communication-panel {
  overflow: visible !important;
}
.unified-messages,
.chat-messages,
.messages,
.message-list {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.unified-gustav-menu-wrap,
.chat-options-wrap,
.message-options,
.message-menu-wrap,
.context-menu-wrap,
.dropdown-wrap {
  position: relative !important;
  z-index: 2147482000 !important;
}
.unified-gustav-menu,
.chat-options-menu,
.message-options-menu,
.context-menu,
.dropdown-menu,
.popover,
.file-menu-popover {
  z-index: 2147483000 !important;
  max-width: min(320px, calc(100vw - 20px)) !important;
  max-height: min(420px, calc(100dvh - 20px)) !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
}
.unified-gustav-menu {
  position: fixed !important;
  right: max(16px, env(safe-area-inset-right)) !important;
  top: max(72px, env(safe-area-inset-top)) !important;
}

/* Final-Fix: Gustav-Bereich oben nicht mehr anschneiden. */
#hubCommunicationPanel,
#saiChatPanel,
.unified-main,
.unified-messages {
  padding-top: max(12px, env(safe-area-inset-top)) !important;
  scroll-padding-top: 80px !important;
}
.unified-main-head {
  position: relative !important;
  top: auto !important;
  z-index: 20 !important;
  margin-top: 0 !important;
  padding-top: 8px !important;
}
.unified-message.gustav-message,
.gustav-processing-shell {
  margin-top: 8px !important;
}

/* Final-Fix: Mini-Gustav-Livestatus bleibt lesbar und springt nicht. */
#saiCopilotStatus {
  min-height: 42px !important;
  display: grid !important;
  gap: 2px !important;
  align-content: center !important;
}
#saiCopilotStatus strong,
#saiCopilotStatus span {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

/* Final-Fix Verwaltung Navigation + roter Badge für offene Team-Freigaben */
#teamManagementNavBtn,
.portal-nav .nav-pill[data-panel="teamManagementPanel"]{
  position:relative!important;
  align-items:center!important;
  gap:10px!important;
}
#teamManagementNavBtn.sai-team-nav-visible,
.portal-nav .nav-pill[data-panel="teamManagementPanel"].sai-team-nav-visible{
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
}
.sai-team-management-badge{
  position:absolute!important;
  top:6px!important;
  right:8px!important;
  min-width:20px!important;
  height:20px!important;
  padding:0 6px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#ef4444!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border:2px solid rgba(15,23,42,.92)!important;
  box-shadow:0 8px 18px rgba(239,68,68,.35)!important;
  font-size:12px!important;
  font-weight:950!important;
  line-height:1!important;
  z-index:5!important;
  pointer-events:none!important;
}
.sai-team-management-badge[hidden]{display:none!important;}
.sai-mobile-bottom-nav button[data-panel="teamManagementPanel"]{position:relative!important;}
.sai-mobile-bottom-nav .sai-team-management-badge{
  top:2px!important;
  right:10px!important;
  min-width:18px!important;
  height:18px!important;
  font-size:11px!important;
}


/* Final-Fix 2: Verwaltung muss für Ausbilder sofort sichtbar sein.
   Die Klasse wird direkt nach /api/me aus script.js gesetzt und gewinnt gegen alte inline display:none-Regeln. */
body.sai-can-team-manage #teamManagementNavBtn,
body.sai-can-team-manage .portal-nav .nav-pill[data-panel="teamManagementPanel"]{
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}
body:not(.sai-can-team-manage) #teamManagementNavBtn:not(.sai-team-nav-visible){
  display:none!important;
}
body.sai-modern-dark-app.sai-can-team-manage .portal-nav #teamManagementNavBtn::before{
  content: attr(data-sai-icon);
}