/* ============================================================
   Copia – „Liquid Glass" UI (iOS 26 / macOS 26-inspiriert)
   Variablengetrieben; alle Klassennamen bleiben kompatibel.
   ============================================================ */
/* Geteilte Tokens (themenunabhängig): Radien, Akzent (zalias-Grün), Effekte */
:root {
  --radius: 18px;
  --radius-md: 14px;
  --radius-sm: 11px;
  --cap: 980px;                 /* Kapsel/Pill */

  --accent: #3caa00;            /* zalias-Markengrün (aus dem Falter-Icon) */
  --accent-press: #2f8a00;      /* dunkler – weiße Schrift bleibt lesbar */
  --accent-2: #34d39a;          /* Mint für kleine Positiv-Indikatoren */
  --danger: #ff5d6c;
  --warn: #ffb454;
  --accent-glow: rgba(60, 170, 0, .15);
  --accent-soft: rgba(60, 170, 0, .11);
  --ring: rgba(60, 170, 0, .40);
  --on-accent: #ffffff;
  --blur: saturate(180%) blur(28px);
}

/* --- Dunkel (Basis-Theme) --- */
:root, :root[data-theme="dark"] {
  --text: #f2f4fc;
  --muted: rgba(233, 236, 250, .56);
  --app-bg: #0a0c16;
  --glass: rgba(255, 255, 255, .055);
  --glass-2: rgba(255, 255, 255, .095);
  --glass-hi: rgba(255, 255, 255, .14);
  --brd: rgba(255, 255, 255, .10);
  --brd-strong: rgba(255, 255, 255, .18);
  --inset: rgba(255, 255, 255, .04);
  --shadow: 0 14px 40px rgba(0, 0, 0, .45);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, .32);
  --scrim: rgba(6, 8, 16, .55);
  --pop: rgba(24, 28, 44, .88);
  --bubble-in: #2b2f3a;
  --app-grad:
    radial-gradient(1100px 760px at 50% -12%, rgba(255, 255, 255, .025), transparent 60%),
    radial-gradient(900px 650px at 114% 2%, rgba(60, 170, 0, .045), transparent 55%),
    var(--app-bg);
  --bg: var(--app-bg); --panel: var(--glass); --panel-2: var(--glass-2); --border: var(--brd);
}

/* --- Hell (Werte) – per Mixin in zwei Selektoren --- */
@media (prefers-color-scheme: light) { :root:not([data-theme]) {
  --text: #18201c; --muted: rgba(40, 48, 44, .60); --app-bg: #eef0ee;
  --glass: rgba(255, 255, 255, .62); --glass-2: rgba(255, 255, 255, .80); --glass-hi: rgba(255, 255, 255, .92);
  --brd: rgba(20, 50, 16, .12); --brd-strong: rgba(20, 50, 16, .20); --inset: rgba(20, 50, 16, .04);
  --shadow: 0 14px 36px rgba(20, 60, 18, .16); --shadow-sm: 0 6px 16px rgba(20, 60, 18, .12);
  --ring: rgba(60, 170, 0, .38); --accent-glow: rgba(60, 170, 0, .10); --scrim: rgba(18, 36, 16, .28); --pop: rgba(255, 255, 255, .92); --bubble-in: #e9e9eb;
  --app-grad:
    radial-gradient(1100px 760px at 114% -6%, rgba(60, 170, 0, .05), transparent 55%),
    linear-gradient(180deg, #f3f4f3, #e9ebe9);
  --bg: var(--app-bg); --panel: var(--glass); --panel-2: var(--glass-2); --border: var(--brd);
}}
:root[data-theme="light"] {
  --text: #18201c; --muted: rgba(40, 48, 44, .60); --app-bg: #eef0ee;
  --glass: rgba(255, 255, 255, .62); --glass-2: rgba(255, 255, 255, .80); --glass-hi: rgba(255, 255, 255, .92);
  --brd: rgba(20, 50, 16, .12); --brd-strong: rgba(20, 50, 16, .20); --inset: rgba(20, 50, 16, .04);
  --shadow: 0 14px 36px rgba(20, 60, 18, .16); --shadow-sm: 0 6px 16px rgba(20, 60, 18, .12);
  --ring: rgba(60, 170, 0, .38); --accent-glow: rgba(60, 170, 0, .10); --scrim: rgba(18, 36, 16, .28); --pop: rgba(255, 255, 255, .92); --bubble-in: #e9e9eb;
  --app-grad:
    radial-gradient(1100px 760px at 114% -6%, rgba(60, 170, 0, .05), transparent 55%),
    linear-gradient(180deg, #f3f4f3, #e9ebe9);
  --bg: var(--app-bg); --panel: var(--glass); --panel-2: var(--glass-2); --border: var(--brd);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--app-grad);
  background-attachment: fixed;
  min-height: 100vh;
}

.hidden { display: none !important; }
.muted { color: var(--muted); }
.error { color: var(--danger); min-height: 1.2em; margin-top: 8px; font-size: 14px; }

/* Dünne, dezente Scrollbars (macOS-Stil) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--brd-strong); border-radius: 980px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }
::selection { background: rgba(60, 170, 0, .22); }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card {
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--brd-strong); border-radius: 24px; padding: 34px; width: 350px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi);
}
.login-card h1 { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: -.02em; }
.login-card input { background: var(--glass-2); }

/* ---------- Topbar ---------- */
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 18px; position: sticky; top: 0; z-index: 20; flex-wrap: wrap;
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--brd);
  box-shadow: var(--shadow-sm);
}
.brand { font-weight: 700; font-size: 18px; display: inline-flex; align-items: center; gap: 8px; line-height: 1; letter-spacing: -.02em; cursor: pointer; border-radius: var(--cap); padding: 4px 8px; margin: -4px -2px; transition: background .15s; outline: none; }
.brand:hover { background: var(--accent-soft); }
.brand:focus-visible { box-shadow: 0 0 0 3px var(--ring); }
.brand-icon { height: 26px !important; width: auto !important; max-height: 26px; display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.brand-title { display: flex; align-items: center; justify-content: center; gap: 10px; }
.brand-icon-lg { height: 34px !important; max-height: 34px; }
.sku-link { color: var(--accent); text-decoration: none; font-weight: 500; }
.sku-link:hover { text-decoration: underline; }
.up { color: var(--accent-2); }
.down { color: var(--danger); }

#nav { display: flex; gap: 1px; flex: 1; flex-wrap: wrap; align-items: center; }
#nav button {
  background: transparent; border: none; color: var(--muted);
  padding: 8px 12px; border-radius: 0; cursor: pointer; font-size: 14px; font-weight: 550;
  position: relative; line-height: 1.2; transition: color .15s;
}
#nav button:hover { color: var(--text); }
/* Aktiver Top-Level-Eintrag: Akzent-Text + feiner Unterstrich (Tab-Stil, keine Fläche) */
#nav > button.active, .nav-trigger.active { color: var(--accent); }
#nav > button.active::after, .nav-trigger.active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 1px; height: 2px;
  background: var(--accent); border-radius: 2px;
}
.nav-caret { font-size: 10px; opacity: .65; margin-left: 4px; display: inline-block; transition: transform .2s ease; }
.nav-group.open .nav-caret { transform: rotate(180deg); }

.nav-group { position: relative; }
.nav-menu {
  position: absolute; top: calc(100% + 9px); left: 0; z-index: 30;
  background: var(--pop); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--brd-strong); border-radius: var(--radius-md);
  padding: 7px; min-width: 204px; flex-direction: column; gap: 1px;
  display: none; box-shadow: var(--shadow);
}
.nav-group.open .nav-menu { display: flex; animation: pop .16s ease-out; }
/* Submenü = ruhige Liste, dezenter Hover, kein Button-auf-Fläche-Look */
.nav-menu button {
  text-align: left; white-space: nowrap; border-radius: var(--radius-sm);
  color: var(--text); font-weight: 500; padding: 9px 12px; width: 100%;
  transition: background .12s, color .12s;
}
.nav-menu button::after { display: none !important; }
.nav-menu button:hover { background: var(--accent-soft); color: var(--accent); }
.nav-menu button.active { background: transparent; color: var(--accent); font-weight: 650; }
.nav-menu button.active::before { content: "›"; margin-right: 7px; color: var(--accent); font-weight: 800; }
.user-box { display: flex; align-items: center; gap: 8px; font-size: 14px; }

/* Globale Suche */
.gsearch { position: relative; flex: 0 0 auto; }
.gsearch > input { width: 220px; max-width: 40vw; padding: 7px 12px; border-radius: var(--cap); border: 1px solid var(--brd); background: var(--inset); color: var(--text); font-size: 13px; outline: none; transition: width .15s ease, box-shadow .15s ease, border-color .15s ease; }
.gsearch > input::placeholder { color: var(--muted); }
.gsearch > input:focus { width: 320px; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.gsearch-results { position: absolute; top: calc(100% + 8px); right: 0; width: 360px; max-width: 86vw; max-height: 70vh; overflow-y: auto; background: var(--pop); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--brd); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; z-index: 60; animation: pop .14s ease-out; }
.gs-group { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 10px 3px; }
.gs-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; cursor: pointer; }
.gs-item:hover, .gs-item.active { background: var(--accent-soft); }
.gs-ico { width: 20px; text-align: center; flex: 0 0 auto; }
.gs-txt { display: flex; flex-direction: column; min-width: 0; }
.gs-title { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-empty { padding: 14px; text-align: center; color: var(--muted); font-size: 13px; }

/* Kalender */
.cal-wrap { padding: 10px; }
.cal-wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.cal-wd > div { text-align: center; font-size: 12px; color: var(--muted); font-weight: 600; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-cell { min-height: 104px; border: 1px solid var(--brd); border-radius: 10px; padding: 5px; background: var(--inset); cursor: pointer; display: flex; flex-direction: column; gap: 3px; overflow: hidden; transition: background .12s; }
.cal-cell:hover { background: var(--accent-soft); }
.cal-cell.other { opacity: .45; }
.cal-cell.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-day { font-size: 12px; color: var(--muted); font-weight: 600; align-self: flex-start; }
.cal-cell.today .cal-day { color: var(--accent); }
.cal-items { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-chip { font-size: 11px; line-height: 1.3; padding: 2px 6px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.cal-chip.ev { background: var(--accent-soft); color: var(--text); }
.cal-chip.due { background: rgba(74, 144, 255, .16); color: var(--text); }
.cal-chip.dl { background: rgba(255, 93, 108, .16); color: var(--text); }
.cal-chip.done { opacity: .5; text-decoration: line-through; }
.cal-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.cal-more { font-size: 11px; color: var(--muted); cursor: pointer; padding: 1px 6px; }
.cal-more:hover { color: var(--accent); }
.cal-colors { gap: 6px; }
.cal-sw { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.cal-sw.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--ring); }
.cal-daylist { display: flex; flex-direction: column; gap: 5px; }
@media (max-width: 680px) { .cal-cell { min-height: 64px; } .cal-chip { font-size: 10px; } }

main { padding: 24px; max-width: 1200px; margin: 0 auto; }

/* ---------- Buttons ---------- */
button {
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  background: linear-gradient(180deg, var(--accent), var(--accent-press)); color: var(--on-accent); border: none;
  padding: 9px 16px; border-radius: var(--cap);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .12s ease, filter .18s, box-shadow .18s, background .18s;
}
button:hover { filter: brightness(1.06); }
button:active { transform: scale(.96); }
button.ghost {
  background: var(--glass-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--brd-strong); color: var(--text); box-shadow: var(--shadow-sm);
}
button.secondary {
  background: var(--glass-2); border: 1px solid var(--brd-strong); color: var(--text);
  box-shadow: var(--shadow-sm);
}
button.success { background: linear-gradient(180deg, var(--accent), var(--accent-press)); color: var(--on-accent); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.18); }
button.danger { background: linear-gradient(180deg, #ff6b78, #f24757); box-shadow: 0 4px 14px rgba(255,93,108,.4), inset 0 1px 0 rgba(255,255,255,.25); }
button.sm { padding: 5px 11px; font-size: 13px; }

/* ---------- Layout-Helfer ---------- */
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 14px; }
h2 { margin: 0 0 18px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
h3 { margin: 0 0 10px; font-size: 16px; font-weight: 650; letter-spacing: -.01em; }

/* ---------- Cards ---------- */
.card {
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--brd); border-radius: var(--radius); padding: 20px;
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hi);
}
.stat {
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--brd); border-radius: var(--radius); padding: 18px;
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hi);
  transition: transform .18s ease, box-shadow .18s;
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat .num { font-size: 30px; font-weight: 750; letter-spacing: -.02em; }
.stat .lbl { color: var(--muted); font-size: 13px; margin-top: 4px; }
.stat.warn .num { color: var(--warn); }

/* ---------- Inputs ---------- */
input, select, textarea {
  background: var(--glass-2); border: 1px solid var(--brd-strong); color: var(--text);
  padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14px; font-family: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
label { font-size: 13px; color: var(--muted); display: block; margin-bottom: 5px; font-weight: 500; }
.field { margin-bottom: 13px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- Tabelle ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--brd); }
th { color: var(--muted); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background .14s; }
tr:hover td { background: var(--inset); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tag { display: inline-block; padding: 2px 9px; border-radius: var(--cap); font-size: 12px; font-weight: 600; }
.tag.in { background: rgba(52,211,154,.16); color: var(--accent-2); }
.tag.out { background: rgba(255,93,108,.16); color: var(--danger); }
.tag.adjust, .tag.inventory { background: rgba(255,180,84,.16); color: var(--warn); }
.tag.transfer_in, .tag.transfer_out { background: rgba(60,170,0,.18); color: var(--accent); }
.pill { padding: 3px 10px; border-radius: var(--cap); background: var(--glass-2); border: 1px solid var(--brd); font-size: 12px; font-weight: 500; }
.low { color: var(--danger); font-weight: 600; }

/* ---------- Modal ---------- */
.modal-back {
  position: fixed; inset: 0; background: var(--scrim);
  backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%);
  display: grid; place-items: center; z-index: 50; padding: 16px;
  animation: fade .2s ease-out;
}
.modal {
  background: var(--glass-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--brd-strong); border-radius: 22px;
  width: 520px; max-width: 100%; max-height: 90vh; overflow: auto; padding: 24px;
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi);
  animation: pop .2s ease-out;
}
.modal .modal-body { /* Hülle für eingehängte Inhalte */ }
.modal.wide { width: 980px; }
.crm-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; }
.crm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.crm-sec { border: 1px solid var(--brd); border-radius: var(--radius-md); padding: 13px 15px; background: var(--inset); }
.crm-sec h3 { margin: 0 0 8px; font-size: 15px; }
.crm-sec.full { grid-column: 1 / -1; }
@media (max-width: 760px) { .modal.wide { width: 100%; } .crm-grid { grid-template-columns: 1fr; } }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--glass-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--brd-strong); color: var(--text);
  padding: 12px 20px; border-radius: var(--cap); z-index: 100; max-width: 90vw;
  box-shadow: var(--shadow); animation: pop .2s ease-out;
}
.toast.ok { border-color: rgba(52,211,154,.6); }
.toast.err { border-color: rgba(255,93,108,.6); }

/* ---------- Scan ---------- */
.scan-box { max-width: 520px; }
#scan-video { width: 100%; border-radius: var(--radius); background: #000; aspect-ratio: 4/3; object-fit: cover; }
.big-input { font-size: 20px; padding: 14px; text-align: center; letter-spacing: 1px; }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.toolbar input[type=search] { min-width: 220px; flex: 1; }
.empty { color: var(--muted); padding: 30px; text-align: center; }

/* ---------- App-Layout / Footer ---------- */
#app-view { display: flex; flex-direction: column; min-height: 100vh; }
#app-view > main { flex: 1 0 auto; }
.app-footer {
  flex-shrink: 0;
  width: 100%; max-width: 1200px; margin: 0 auto; box-sizing: border-box;
  padding: 16px 24px;
  border-top: 1px solid var(--brd);
  color: var(--muted); font-size: 12.5px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.app-footer .app-ver { opacity: .85; white-space: nowrap; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; }
  main { padding: 14px; }
  .app-footer { flex-direction: column; gap: 4px; text-align: center; padding: 12px 14px; }
}

/* ============================================================
   Chat
   ============================================================ */
#chat-btn { position: relative; }
#chat-unread {
  position: absolute; top: -3px; right: -3px;
  background: linear-gradient(180deg, #ff6b78, #f24757); color: #fff; border-radius: var(--cap);
  font-size: 10px; line-height: 16px; min-width: 16px; height: 16px;
  padding: 0 4px; text-align: center; font-weight: 700; box-shadow: 0 2px 8px rgba(255,93,108,.5);
}
.chat-wrap {
  display: flex; border: 1px solid var(--brd); border-radius: var(--radius); overflow: hidden;
  height: calc(100vh - 230px); min-height: 460px;
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hi);
}
.chat-side { width: 286px; border-right: 1px solid var(--brd); display: flex; flex-direction: column; min-width: 0; }
.chat-side-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--brd); font-weight: 650; }
.chat-channels { overflow: auto; flex: 1; padding: 6px; }
.chat-chan {
  display: grid; grid-template-columns: 1fr auto; gap: 1px 6px; align-items: center;
  width: 100%; text-align: left; background: transparent; border: none; border-radius: var(--radius-sm);
  padding: 9px 12px; cursor: pointer; color: var(--text); margin-bottom: 2px;
  transition: background .14s;
}
.chat-chan:hover { background: var(--glass-2); }
.chat-chan.active { background: var(--accent); color: var(--on-accent); }
.chat-chan-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-chan-last { grid-column: 1 / 2; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-chan.active .chat-chan-last { color: rgba(255,255,255,.82); }
.chat-badge { background: linear-gradient(180deg, #ff6b78, #f24757); color: #fff; border-radius: var(--cap); font-size: 11px; padding: 0 7px; min-width: 18px; text-align: center; font-weight: 700; }
.chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-head { padding: 13px 16px; border-bottom: 1px solid var(--brd); font-weight: 650; }
.chat-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-msgs { flex: 1; overflow: auto; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 0; }
.chat-msg { display: flex; align-items: flex-start; gap: 8px; margin-top: 11px; }
.chat-msg.grouped { margin-top: 2px; }
.chat-msg.mine { justify-content: flex-end; }
.chat-col { display: flex; flex-direction: column; min-width: 0; max-width: 78%; }
.chat-msg.mine .chat-col { align-items: flex-end; }
.chat-avatar { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; margin-top: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.chat-avatar-spacer { width: 28px; flex: 0 0 auto; }
.chat-name { font-size: 11.5px; color: var(--muted); margin: 0 0 3px 13px; font-weight: 600; }
.chat-bubble {
  position: relative; width: fit-content; max-width: 100%;
  background: var(--bubble-in); color: var(--text); border: none;
  border-radius: 19px; padding: 7px 13px; font-size: 14.5px;
}
.chat-msg.mine .chat-bubble { background: var(--accent); color: #fff; }
/* iMessage-Tails – nur an der letzten Nachricht einer Gruppe */
.chat-msg.tail:not(.mine) .chat-bubble { border-bottom-left-radius: 7px; }
.chat-msg.tail:not(.mine) .chat-bubble::after {
  content: ""; position: absolute; left: -6px; bottom: 0; width: 14px; height: 17px;
  background: var(--bubble-in); border-bottom-right-radius: 16px; z-index: -1;
}
.chat-msg.mine.tail .chat-bubble { border-bottom-right-radius: 7px; }
.chat-msg.mine.tail .chat-bubble::after {
  content: ""; position: absolute; right: -6px; bottom: 0; width: 14px; height: 17px;
  background: var(--accent); border-bottom-left-radius: 16px; z-index: -1;
}
.chat-text { white-space: pre-wrap; word-break: break-word; line-height: 1.38; }
.chat-mention { background: rgba(60,170,0,.20); border-radius: 6px; padding: 0 4px; font-weight: 600; }
.chat-msg.mine .chat-mention { background: rgba(255,255,255,.22); }
/* Composer: Pill-Eingabe mit rundem Sende-Button */
.chat-composer { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--brd); align-items: flex-end; }
.chat-inputwrap { flex: 1; display: flex; align-items: flex-end; gap: 6px; min-width: 0; background: var(--glass-2); border: 1px solid var(--brd-strong); border-radius: 21px; padding: 4px 5px 4px 15px; }
.chat-inputwrap textarea { flex: 1; border: none !important; background: transparent !important; box-shadow: none !important; outline: none !important; resize: none; padding: 6px 0; min-height: 24px; max-height: 120px; line-height: 1.35; border-radius: 0; font-size: 14.5px; }
.chat-send { width: 30px; height: 30px; min-width: 30px; border-radius: 50%; padding: 0; font-size: 17px; line-height: 1; display: grid; place-items: center; flex: 0 0 auto; }
.chat-objsec { margin-top: 10px; }
.chat-pane-compact { height: 330px; border: 1px solid var(--brd); border-radius: var(--radius-md); overflow: hidden; background: var(--inset); }

.chat-atts { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.chat-att-img { max-width: 220px; max-height: 220px; border-radius: 12px; display: block; cursor: pointer; box-shadow: var(--shadow-sm); }
.chat-att-file { display: inline-block; padding: 6px 11px; border: 1px solid var(--brd-strong); border-radius: var(--cap); text-decoration: none; color: inherit; font-weight: 500; }
.chat-msg.mine .chat-att-file { border-color: rgba(255,255,255,.4); }
.chat-attach { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 23px; font-weight: 300; flex: 0 0 auto; color: var(--muted); user-select: none; transition: background .15s, color .15s; }
.chat-attach:hover { background: var(--glass-2); color: var(--accent); }
.chat-notif-hint { padding: 10px 14px; font-size: 12.5px; background: var(--inset); border-bottom: 1px solid var(--brd); display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.chat-mentions { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.chat-mention-item { text-align: left; width: 100%; background: var(--glass-2); border: 1px solid var(--brd); border-radius: var(--radius-md); padding: 10px 13px; cursor: pointer; color: var(--text); transition: border-color .15s, transform .12s; }
.chat-mention-item:hover { border-color: var(--accent); transform: translateY(-1px); }

/* Datums-Trenner */
.chat-daysep { text-align: center; margin: 16px 0 8px; }
.chat-daysep span { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--inset); padding: 3px 11px; border-radius: var(--cap); }
/* Zugestellt / Gelesen (DM) */
.chat-receipt { font-size: 11px; color: var(--muted); margin: 3px 4px 0 0; }
/* Tippt-Indikator */
.chat-typing { display: flex; align-items: center; gap: 8px; padding: 0 16px 6px; font-size: 12px; min-height: 0; }
.chat-typing[hidden] { display: none; }
.chat-typing-dots { display: inline-flex; gap: 3px; }
.chat-typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); display: block; animation: typingblink 1.2s infinite; }
.chat-typing-dots i:nth-child(2) { animation-delay: .2s; }
.chat-typing-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes typingblink { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
/* Reaktionen */
.chat-bubblewrap { position: relative; max-width: 100%; }
.chat-msg-actions { position: absolute; top: 50%; transform: translateY(-50%); display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.chat-msg:not(.mine) .chat-msg-actions { right: -54px; }
.chat-msg.mine .chat-msg-actions { left: -54px; flex-direction: row-reverse; }
.chat-msg:hover .chat-msg-actions { opacity: .6; }
.chat-msg-actions:hover { opacity: 1; }
.chat-react-add, .chat-task-add { width: 24px; height: 24px; border-radius: 50%; background: transparent; border: none; box-shadow: none; font-size: 13px; padding: 0; cursor: pointer; line-height: 1; transition: background .12s; }
.chat-react-add:hover, .chat-task-add:hover { background: var(--glass-2); }
.chat-task-add { color: var(--accent); font-weight: 700; }
.chat-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chat-react { background: var(--glass-2); border: 1px solid var(--brd); border-radius: var(--cap); padding: 1px 8px; font-size: 12px; color: var(--text); box-shadow: none; font-weight: 500; }
.chat-react.mine { border-color: var(--accent); background: var(--accent-soft); }
.chat-react-pop { position: fixed; z-index: 80; display: flex; gap: 2px; padding: 5px; background: var(--pop); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--brd-strong); border-radius: var(--cap); box-shadow: var(--shadow); }
.chat-react-pop button { background: transparent; border: none; box-shadow: none; font-size: 20px; padding: 3px 5px; border-radius: 50%; line-height: 1; transition: transform .1s, background .12s; }
.chat-react-pop button:hover { background: var(--glass-2); transform: scale(1.18); }

/* Schwebendes Chat-Fenster */
.chat-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: min(760px, calc(100vw - 36px)); height: min(600px, calc(100vh - 110px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--glass-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--brd-strong); border-radius: 18px; box-shadow: var(--shadow);
  animation: pop .18s ease-out;
}
.chat-float-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--brd); cursor: move; user-select: none; font-weight: 650; }
.chat-float-x { background: transparent; border: none; color: var(--muted); font-size: 15px; box-shadow: none; padding: 4px 9px; border-radius: 8px; }
.chat-float-x:hover { background: var(--glass-2); color: var(--text); }
.chat-float-body { flex: 1; min-height: 0; display: flex; }
.chat-float .chat-wrap { height: 100% !important; min-height: 0 !important; border: none; border-radius: 0; box-shadow: none; background: transparent; flex: 1; }

@media (max-width: 640px) {
  .chat-wrap { flex-direction: column; height: auto; }
  .chat-side { width: auto; max-height: 190px; }
  .chat-att-img { max-width: 160px; max-height: 160px; }
  .chat-float { right: 8px; bottom: 8px; left: 8px; width: auto; height: calc(100vh - 80px); }
}

/* ---------- Aufgaben ---------- */
.task-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--brd); }
.task-row:last-child { border-bottom: none; }
.task-check { width: 25px; height: 25px; min-width: 25px; border-radius: 50%; border: 2px solid var(--brd-strong); background: var(--glass-2); color: #fff; box-shadow: none; padding: 0; font-size: 15px; font-weight: 800; line-height: 1; display: grid; place-items: center; cursor: pointer; margin-top: 1px; flex: 0 0 auto; transition: transform .1s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease; }
.task-check:not(.on) { color: var(--muted); }
.task-check:hover { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(60, 170, 0, .18); transform: scale(1.08); }
.task-check:not(.on):hover::after { content: "✓"; color: var(--accent); opacity: .6; }
.task-check:active { transform: scale(.92); }
.task-check.on { background: var(--accent); border-color: var(--accent); }
.task-check.on:hover { box-shadow: 0 0 0 3px rgba(60, 170, 0, .25); }
.task-check.on:hover::after { content: ""; }
.task-main { flex: 1; min-width: 0; }
.task-title { font-weight: 500; }
.task-meta { font-size: 12px; color: var(--muted); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.task-prio { font-size: 12px; }
.task-link { color: var(--accent); text-decoration: none; }
.task-link:hover { text-decoration: underline; }
.task-edit { background: transparent; border: none; box-shadow: none; color: var(--muted); padding: 4px 7px; border-radius: 8px; opacity: 0; flex: 0 0 auto; }
.task-row:hover .task-edit { opacity: .8; }
.task-edit:hover { background: var(--glass-2); color: var(--text); }
.task-row.done .task-title { text-decoration: line-through; color: var(--muted); }
.task-titlelink { cursor: pointer; }
.task-titlelink:hover { text-decoration: underline; }
.task-label { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: var(--cap); background: var(--accent-soft); color: var(--accent); border: 1px solid var(--brd); }
.obj-tasks .ot-list .task-row { padding: 6px 2px; }
code { background: var(--glass-2); border: 1px solid var(--brd); border-radius: 6px; padding: 1px 6px; font-size: 13px; }

/* Aufgaben-Workspace (Todoist-Stil): Sidebar + Board */
.tasks-wrap { display: flex; border: 1px solid var(--brd); border-radius: var(--radius); overflow: hidden; min-height: 560px; background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow-sm); }
.tasks-side { width: 252px; border-right: 1px solid var(--brd); display: flex; flex-direction: column; min-width: 0; }
.tasks-side-scroll { flex: 1; overflow: auto; padding: 8px; }
.tk-grp { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 12px 10px 4px; }
.tk-list { display: flex; flex-direction: column; gap: 1px; }
.tk-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border: none; box-shadow: none; color: var(--text); padding: 7px 10px; border-radius: 9px; cursor: pointer; font-weight: 500; }
.tk-item:hover { background: var(--glass-2); }
.tk-item.active { background: var(--accent-soft); color: var(--accent); }
.tk-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.tk-count { font-size: 12px; }
.tasks-main { flex: 1; min-width: 0; padding: 18px; overflow: auto; }
.tk-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.tk-col { width: 280px; min-width: 280px; background: var(--inset); border: 1px solid var(--brd); border-radius: var(--radius-md); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.tk-col-head { font-weight: 650; }
.tk-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 8px; }
.tk-col-add { align-self: flex-start; }
.tk-col-new { background: transparent; border-style: dashed; }
.tk-card { background: var(--glass); border: 1px solid var(--brd); border-radius: 10px; padding: 8px 10px; box-shadow: var(--shadow-sm); }
@media (max-width: 760px) { .tasks-wrap { flex-direction: column; } .tasks-side { width: auto; max-height: 200px; border-right: none; border-bottom: 1px solid var(--brd); } }