/* ===============================
   Praxis-Chat · Mobile & Laptop Fix
   =============================== */

/* ---- Variablen ---- */
:root{
  --brand:        #2f7d68;
  --brand-strong: #256556;
  --brand-weak:   #e7f3ef;
  --brand-ring:   rgba(47,125,104,.35);

  --bg:           #f7faf9;
  --surface:      #ffffff;
  --surface-2:    #fcfefd;
  --text:         #20302b;
  --muted:        #5a6c65;
  --border:       #e4ece8;
  --shadow:       0 10px 25px rgba(0,0,0,.08);

  --green:        #2e7d32;
  --yellow:       #b88700;
  --red:          #c62828;

  --bubble-bot:   #ffffff;
  --bubble-user:  #eaf3f0;

  --radius:       14px;
  --radius-sm:    10px;

  /* Reservierte Höhen (für Platz am unteren Rand) */
  --composer-h:   56px; /* ~ Höhe des Composer-Bereichs inkl. Button */
  --qa-h:         46px; /* ~ Höhe der Quick-Actions-Zeile */
}

/* immer hell; Dark Mode entfernt */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.45 ui-sans-serif, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  overflow-x: hidden; /* Nichts darf “rausragen” */
}

/* ========== Rahmenlayout ========== */
.chat-wrap{
  width: min(960px, 100vw);
  height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
}
@supports (height: 100svh){
  .chat-wrap{ height: 100svh; } /* stabiler auf Mobil */
}

/* Desktop: hübsche Karte */
@media (min-width: 1024px){
  .chat-wrap{
    margin: 24px auto;
    border-radius: 16px;
    box-shadow: var(--shadow);
  }
}

/* ========== Header ========== */
.chat-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border-bottom: 1px solid var(--border);
  max-width: 100vw;
}
.chat-head-left{ display:flex; gap:10px; align-items:center; min-width: 0; }
.avatar{ width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--brand-weak); object-fit: cover; }
.chat-title{ margin: 0; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-sub{ margin: 2px 0 0; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.head-links{ display:flex; gap:8px; align-items:center; flex-wrap: wrap; }
.chat-link{
  color: var(--brand-strong); text-decoration: none; font-weight: 600;
  padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid transparent; font-size: 14px;
}
.chat-link:hover{ background: var(--brand-weak); border-color: var(--brand-weak); }
.chat-link.buttonlike{
  background: var(--brand); color: #fff; border: 1px solid var(--brand-strong);
}

/* Status */
.status-indicator{
  display:flex; gap:8px; align-items:center;
  padding: 6px 10px; border:1px solid var(--border); border-radius: 999px;
  background: var(--surface-2); white-space: nowrap;
}
.status-dot{ width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); }
.status-indicator.open .status-dot{ background: var(--green); }
.status-indicator.closed .status-dot{ background: var(--yellow); }
.status-text{ font-size: 13px; color: var(--muted); }

/* ========== Messages ========== */
.messages{
  position: relative;
  flex: 1 1 auto;
  overflow: auto;
  padding: 12px 12px 16px;
  background: var(--surface);
  /* Platz für Quick-Actions + Composer + Safe-Area */
  padding-bottom: calc(16px + var(--qa-h) + var(--composer-h) + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
  max-width: 100vw;
}
.bubble{
  max-width: clamp(280px, 92vw, 720px); /* verhindert Überbreite auf Handy & Laptop */
  padding: 10px 12px 9px;
  margin: 8px 0;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 3px 10px rgba(0,0,0,.04);
  position: relative;
  overflow-wrap: anywhere; /* lange Wörter/Links umbrechen */
}
.bubble.bot{ background: var(--bubble-bot); border-top-left-radius: 6px; }
.bubble.user{
  margin-left: auto;
  background: var(--bubble-user);
  border-top-right-radius: 6px;
  border-color: color-mix(in srgb, var(--brand) 25%, var(--border));
}
.bubble .bubble-inner{ max-width: 100%; }
.bubble .stamp{
  display:block; font-size: 12px; color: var(--muted);
  margin-top: 6px; text-align: right;
}

/* Schreib-Indikator */
.typing{ display:inline-flex; gap:4px; align-items:center; height:1em; }
.typing i{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background: var(--muted); opacity:.55; animation: t .9s infinite ease-in-out;
}
.typing i:nth-child(2){ animation-delay:.15s }
.typing i:nth-child(3){ animation-delay:.30s }
@keyframes t{ 0%,80%,100%{ transform: translateY(0) } 40%{ transform: translateY(-4px) } }

/* ========== Quick Actions (NICHT mehr sticky) ========== */
.quick-actions{
  display:flex; gap:8px; flex-wrap:wrap;
  padding: 8px 12px 10px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  max-width: 100vw;
}
.qa{
  border:1px solid var(--border);
  background: #fff; color: var(--text);
  padding: 9px 12px;
  border-radius: 999px;
  font-weight: 600; font-size: 14px; cursor:pointer;
  touch-action: manipulation;
}

/* ========== Composer (sticky; allein am unteren Rand) ========== */
.composer{
  position: sticky; bottom: 0;
  display:flex; gap:8px; align-items:flex-end;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--border);
  background: var(--surface);
  z-index: 10;
  min-height: var(--composer-h);
  max-width: 100vw;
}
.input{
  flex:1; resize:none; padding: 12px 12px; border-radius: var(--radius);
  border:1px solid var(--border); outline: none;
  background: var(--surface); color: var(--text);
  font: inherit; max-height: 30vh;
}
.input:focus{
  border-color: var(--brand-strong);
  box-shadow: 0 0 0 4px var(--brand-ring);
}
.send{
  background: var(--brand); color:#fff; border:1px solid var(--brand-strong);
  border-radius: var(--radius); padding: 12px 14px; font-weight:700;
  cursor:pointer; white-space: nowrap;
}

/* ========== Formulare in Bubbles ========== */
.form-inbubble h3{ margin: 0 0 8px; font-size: 18px; }
.form-inbubble .grid{ display:grid; grid-template-columns: 1fr; gap:10px; }
@media (min-width: 640px){
  .form-inbubble .grid{ grid-template-columns: 1fr 1fr; }
}
.form-inbubble label{ display:flex; flex-direction:column; gap:6px; font-size: 14px; }
.form-inbubble input, .form-inbubble textarea{
  border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; background: #fff; color: var(--text); font: inherit;
}
.form-inbubble textarea{ min-height: 78px; }
.form-inbubble input:focus, .form-inbubble textarea:focus{
  border-color: var(--brand-strong); box-shadow: 0 0 0 4px var(--brand-ring); outline: none;
}
.form-inbubble .actions{ display:flex; justify-content:flex-end; margin-top: 4px; }
.form-inbubble .actions button{
  background: var(--brand); color:#fff; border:1px solid var(--brand-strong);
  padding: 10px 14px; border-radius: var(--radius-sm); font-weight:700; cursor:pointer;
}
.consent{
  display:flex; gap:10px; align-items:flex-start; font-size: 14px;
  padding:10px; border-radius: var(--radius-sm); background: var(--brand-weak);
}
.consent a{ color: var(--brand-strong); text-decoration: underline; }
.consent.invalid{ outline: 2px solid var(--red); background: color-mix(in srgb, #fff 70%, #ffebee 30%); }

/* ========== Modal (Datenschutz) ========== */
.modal-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display:none; align-items:center; justify-content:center; z-index:1000;
  padding: 10px;
}
.modal-backdrop.show{ display:flex; }
.modal{
  width: 100%; max-width: 900px; max-height: 86vh; border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  border:1px solid var(--border); box-shadow: var(--shadow);
  display:flex; flex-direction:column;
}
.modal header{
  padding: 12px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.modal header h3{ margin:0; font-size: 16px; }
.modal .modal-body{ padding: 12px; overflow:auto; line-height:1.6; }
.modal .modal-actions{ padding: 10px 12px; border-top:1px solid var(--border); text-align:right; }
.close-btn{
  border:0; background:transparent; font-size: 20px; cursor:pointer; line-height:1;
  color: var(--muted);
}

/* ========== Desktop-Feinschliff ========== */
@media (min-width: 700px){
  .bubble{ max-width: clamp(360px, 70vw, 640px); }
}

/* ===== Header zweizeilig ===== */
.chat-head{
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border-bottom: 1px solid var(--border);
}

.head-row.top { display: flex; align-items: center; min-width: 0; }
.chat-head-left{ display:flex; gap:10px; align-items:center; min-width: 0; }
.titles{ min-width: 0; }
.chat-title{
  margin: 0; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-sub{
  margin: 2px 0 0; color: var(--muted); font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.avatar{ width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--brand-weak); object-fit: cover; }

/* Zeile 2: Status + Links nebeneinander, mit Wrap bei wenig Platz */
.head-row.bottom{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.status-indicator{ order: 0; }
.head-links{ order: 1; display: flex; gap: 8px; flex-wrap: wrap; }

.chat-link{
  color: var(--brand-strong); text-decoration: none; font-weight: 600;
  padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid transparent; font-size: 14px;
}
.chat-link:hover{ background: var(--brand-weak); border-color: var(--brand-weak); }
.chat-link.buttonlike{
  background: var(--brand); color: #fff; border: 1px solid var(--brand-strong);
}

/* Status-Badge kompakt, ohne Überlappung */
.status-indicator{
  display:flex; gap:8px; align-items:center;
  padding: 6px 10px; border:1px solid var(--border);
  border-radius: 999px; background: var(--surface-2);
  max-width: 100%; /* niemals breiter als Header */
}
.status-text{ font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-dot{ width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); }
.status-indicator.open .status-dot{ background: var(--green); }

/* Desktop: etwas großzügiger */
@media (min-width: 900px){
  .chat-title{ font-size: 22px; }
  .head-row.bottom{ gap: 12px; }
}

/* ===== Mobile-Fix: Überschrift & Status dürfen umbrechen ===== */
@media (max-width: 640px){
  .chat-head{ overflow: visible; }

  /* Titelblock: mehr Platz & Umbruch erlauben */
  .head-row.top{ align-items: flex-start; }
  .titles{ min-width: 0; }
  .chat-title{
    font-size: 18px;
    white-space: normal;    /* <-- statt nowrap */
    overflow: visible;
    text-overflow: clip;
    line-height: 1.2;
  }
  .chat-sub{
    white-space: normal;    /* <-- statt nowrap */
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
  }

  /* Zweite Zeile untereinander stapeln, wenn’s eng wird */
  .head-row.bottom{
    flex-direction: column;     /* statt nebeneinander */
    align-items: stretch;
    gap: 6px;
  }

  /* Status-Bubble: volle Breite + Textumbruch */
  .status-indicator{
    width: 100%;
    max-width: 100%;
    align-items: flex-start;
    padding: 8px 10px;
  }
  .status-text{
    white-space: normal;        /* <-- statt nowrap */
    overflow-wrap: anywhere;    /* lange Wörter umbrechen */
    line-height: 1.3;
  }

  /* Links darunter: Zeilenumbruch erlauben */
  .head-links{
    flex-wrap: wrap;
    gap: 6px;
  }
}