/* Embedded KI-assistant panel for staff — the "Meridian"-style companion ported
   to mieterquali. Same-origin stylesheet (CSP style-src 'self' 'unsafe-inline').
   Light theme, uses the app's :root vars from app.css. Docks to the right third
   of the screen by default (reserves layout width), with popup / minimized modes
   and a resizable width. */
:root { --mq-asst-w: 460px; }

/* dock reservation on desktop — shrinks the topbar + shell so nothing is hidden */
@media (min-width: 1100px) {
  body.mq-asst-dock.mq-asst-open.mq-asst-right { padding-right: var(--mq-asst-w); }
  body.mq-asst-dock.mq-asst-open.mq-asst-left  { padding-left:  var(--mq-asst-w); }
}

.mq-asst {
  position: fixed; top: 0; height: 100vh; width: var(--mq-asst-w);
  z-index: 80; display: none; flex-direction: column;
  background: var(--paper, #fff);
  border-left: 1px solid var(--line, #e4e6ee);
  box-shadow: -18px 0 48px -30px rgba(24,32,111,.45);
}
body.mq-asst-open .mq-asst { display: flex; }
body.mq-asst-right .mq-asst { right: 0; left: auto; border-left: 1px solid var(--line); border-right: none; }
body.mq-asst-left  .mq-asst { left: 0; right: auto; border-right: 1px solid var(--line); border-left: none; box-shadow: 18px 0 48px -30px rgba(24,32,111,.45); }

/* popup: a floating window in the corner */
body.mq-asst-popup .mq-asst {
  top: auto; bottom: 20px; height: min(74vh, 680px); width: min(var(--mq-asst-w), 92vw);
  border-radius: 16px; border: 1px solid var(--line); overflow: hidden;
}
body.mq-asst-popup.mq-asst-right .mq-asst { right: 20px; }
body.mq-asst-popup.mq-asst-left  .mq-asst { left: 20px; }
body.mq-asst-popup { padding-right: 0 !important; padding-left: 0 !important; }

/* minimized: panel hidden, only the FAB shows */
body.mq-asst-min { padding-right: 0 !important; padding-left: 0 !important; }
body.mq-asst-min .mq-asst { display: none; }

/* resize handle (dock modes) */
.mq-asst-resize { position: absolute; top: 0; width: 7px; height: 100%; cursor: col-resize; z-index: 2; }
body.mq-asst-right .mq-asst-resize { left: -3px; }
body.mq-asst-left  .mq-asst-resize { right: -3px; }
.mq-asst-resize:hover { background: color-mix(in srgb, var(--orange, #FF8811) 35%, transparent); }
body.mq-asst-popup .mq-asst-resize, body.mq-asst-min .mq-asst-resize { display: none; }

/* head */
.mq-asst-head { display: flex; align-items: center; gap: 11px; padding: 13px 14px; background: var(--navy, #18206F); color: #fff; }
.mq-asst-ava { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 9px; background: rgba(255,255,255,.12); display: grid; place-items: center; font-size: 19px; }
.mq-asst-id { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.mq-asst-name { font-family: var(--fd, sans-serif); font-weight: 700; font-size: 15px; }
.mq-asst-sub { font-size: 11px; opacity: .8; }
.mq-asst-btns { display: flex; gap: 6px; }
.mq-asst-ibtn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; display: grid; place-items: center; font-size: 15px; line-height: 1; }
.mq-asst-ibtn:hover { background: rgba(255,255,255,.18); }
.mq-asst-ibtn svg { width: 15px; height: 15px; }

/* settings menu */
.mq-asst-menu { position: absolute; top: 56px; right: 12px; z-index: 5; background: #fff; border: 1px solid var(--line-strong, #d3d6e2); border-radius: 12px; padding: 10px; width: 234px; box-shadow: var(--shadow-lg, 0 12px 48px rgba(24,32,111,.18)); display: none; }
.mq-asst-menu.show { display: block; }
.mq-asst-menu h4 { margin: 6px 6px 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate, #7b8094); }
.mq-asst-menu .row { display: flex; gap: 6px; margin-bottom: 8px; }
.mq-asst-menu button { flex: 1 1 0; font-family: var(--fb, sans-serif); font-size: 12.5px; padding: 8px 6px; border-radius: 8px; border: 1px solid var(--line-strong, #d3d6e2); background: #fff; color: var(--ink-soft, #565b78); cursor: pointer; }
.mq-asst-menu button.sel { background: var(--navy, #18206F); color: #fff; border-color: var(--navy, #18206F); }
.mq-asst-menu-hint { margin: 2px 6px 4px; font-size: 11px; color: var(--slate, #7b8094); line-height: 1.4; }

/* history overlay */
.mq-asst-history { position: absolute; left: 0; right: 0; top: 62px; bottom: 0; z-index: 6; background: var(--bg, #f4f5f8); border-top: 1px solid var(--line, #e4e6ee); display: none; flex-direction: column; }
.mq-asst-history.show { display: flex; }
.mq-asst-history-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); font-family: var(--fd, sans-serif); font-weight: 700; font-size: 14px; color: var(--ink, #191c33); }
.mq-asst-history-list { flex: 1 1 auto; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.mq-asst-hist-empty { color: var(--slate, #7b8094); font-size: 13px; padding: 16px; text-align: center; }
.mq-asst-hist-item { display: flex; align-items: stretch; gap: 4px; border: 1px solid var(--line, #e4e6ee); border-radius: 10px; overflow: hidden; background: #fff; }
.mq-asst-hist-item.cur { border-color: var(--orange, #FF8811); }
.mq-asst-hist-open { flex: 1 1 auto; text-align: left; background: transparent; border: 0; cursor: pointer; padding: 9px 11px; color: var(--ink, #191c33); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mq-asst-hist-open:hover { background: var(--grey-2, #f4f5f8); }
.mq-asst-hist-open .t { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-asst-hist-open .m { font-size: 11px; color: var(--slate, #7b8094); }
.mq-asst-hist-del { flex: 0 0 auto; width: 38px; background: transparent; border: 0; border-left: 1px solid var(--line); color: var(--slate, #7b8094); cursor: pointer; font-size: 14px; }
.mq-asst-hist-del:hover { color: var(--neg, #c41f54); background: var(--grey-2, #f4f5f8); }

/* messages */
.mq-asst-msgs { flex: 1 1 auto; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 13px; }
.mq-asst-msg { display: flex; gap: 9px; align-items: flex-end; }
.mq-asst-msg.me { justify-content: flex-end; }
.mq-asst-mava { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 7px; background: var(--navy, #18206F); color: #fff; display: grid; place-items: center; font-size: 14px; }
.mq-asst-bubble { max-width: 84%; padding: 10px 13px; border-radius: 13px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.mq-asst-msg.bot .mq-asst-bubble { background: var(--grey-2, #f4f5f8); border: 1px solid var(--line, #e4e6ee); color: var(--ink, #191c33); border-bottom-left-radius: 4px; }
.mq-asst-msg.me .mq-asst-bubble { background: var(--navy, #18206F); color: #fff; border-bottom-right-radius: 4px; }
/* markdown inside bubbles */
.mq-asst-bubble p { margin: 0 0 8px; } .mq-asst-bubble p:last-child { margin-bottom: 0; }
.mq-asst-bubble h1, .mq-asst-bubble h2, .mq-asst-bubble h3 { font-family: var(--fd, sans-serif); margin: 10px 0 6px; line-height: 1.2; }
.mq-asst-bubble h1 { font-size: 16px; } .mq-asst-bubble h2 { font-size: 15px; } .mq-asst-bubble h3 { font-size: 14px; }
.mq-asst-bubble ul, .mq-asst-bubble ol { margin: 6px 0; padding-left: 20px; } .mq-asst-bubble li { margin: 3px 0; }
.mq-asst-bubble strong { color: var(--navy, #18206F); } .mq-asst-msg.me .mq-asst-bubble strong { color: #fff; }
.mq-asst-bubble code { background: #fff; border: 1px solid var(--line-strong, #d3d6e2); border-radius: 5px; padding: 1px 5px; font-family: var(--fm, monospace); font-size: 12.5px; }
.mq-asst-bubble hr { border: none; border-top: 1px solid var(--line-strong, #d3d6e2); margin: 10px 0; }
.mq-asst-bubble table { border-collapse: collapse; width: 100%; font-size: 13px; margin: 6px 0; }
.mq-asst-bubble th, .mq-asst-bubble td { border: 1px solid var(--line, #e4e6ee); padding: 5px 8px; text-align: left; }
.mq-asst-bubble th { color: var(--slate, #7b8094); font-weight: 600; }
.mq-asst-bubble a { color: var(--orange-d, #d96f00); }

/* source links ("Bearbeitete/geöffnete Stellen") */
.mq-asst-refs { margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line-strong, #d3d6e2); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mq-asst-refs-lbl { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--slate, #7b8094); width: 100%; }
.mq-asst-ref { font-size: 12px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line-strong, #d3d6e2); background: #fff; color: var(--navy, #18206F); cursor: pointer; font-family: var(--fb, sans-serif); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-asst-ref:hover { border-color: var(--orange, #FF8811); color: var(--orange-d, #d96f00); }

/* proposal card (Human-in-the-Loop write confirmation) */
.mq-asst-prop { margin: 2px 0 2px 35px; border: 1px solid var(--orange, #FF8811); border-radius: 12px; padding: 12px; background: var(--orange-soft, #ffe9d2); }
.mq-asst-prop .lbl { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--orange-d, #d96f00); margin-bottom: 4px; }
.mq-asst-prop .txt { font-size: 13.5px; color: var(--ink, #191c33); margin-bottom: 10px; }
.mq-asst-prop .acts { display: flex; gap: 8px; }
.mq-asst-prop .done { font-size: 13px; font-weight: 600; color: var(--pos, #19774f); }
.mq-asst-prop .fail { font-size: 12px; color: var(--neg, #c41f54); margin-top: 6px; }

/* chips */
.mq-asst-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.mq-asst-chip { font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-strong, #d3d6e2); background: #fff; color: var(--ink-soft, #565b78); cursor: pointer; }
.mq-asst-chip:hover { border-color: var(--orange, #FF8811); color: var(--orange-d, #d96f00); }

/* typing indicator */
.mq-asst-typing { display: inline-flex; gap: 5px; align-items: center; }
.mq-asst-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--slate, #7b8094); animation: mqAsstB 1.2s infinite; }
.mq-asst-typing span:nth-child(2) { animation-delay: .2s; } .mq-asst-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes mqAsstB { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* config note (e.g. key not configured) */
.mq-asst-cfgnote { margin: 0 14px 12px; font-size: 12px; color: var(--warn, #b5650c); background: var(--warn-soft, #ffe9d2); border-radius: 8px; padding: 9px 11px; }

/* input */
.mq-asst-input { display: flex; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--line, #e4e6ee); align-items: flex-end; }
.mq-asst-input textarea { flex: 1 1 auto; resize: none; max-height: 120px; background: #fff; border: 1px solid var(--line-strong, #d3d6e2); border-radius: 11px; color: var(--ink, #191c33); font-family: var(--fb, sans-serif); font-size: 14px; padding: 10px 12px; line-height: 1.4; }
.mq-asst-input textarea:focus { outline: none; border-color: var(--orange, #FF8811); box-shadow: var(--focus, 0 0 0 3px #ffe9d2); }
.mq-asst-send { padding: 0; width: 42px; height: 42px; flex: 0 0 auto; border-radius: 11px; font-size: 16px; }

/* floating open button (minimized / mobile) */
.mq-asst-fab { position: fixed; right: 20px; bottom: 20px; width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--navy, #18206F); color: #fff; cursor: pointer; z-index: 79; box-shadow: 0 10px 26px -10px rgba(24,32,111,.6); display: none; font-size: 24px; }
body.mq-asst-left .mq-asst-fab { right: auto; left: 20px; }
.mq-asst-fab:hover { transform: translateY(-2px); }
body:not(.mq-asst-open) .mq-asst-fab, body.mq-asst-min .mq-asst-fab { display: block; }

@media (max-width: 1099px) {
  body { padding-right: 0 !important; padding-left: 0 !important; }
  .mq-asst { width: min(420px, 94vw); }
  .mq-asst-resize { display: none; }
}