/* TTN home page - chat with the Translation Manager (15.10.2026, Chat_Knopf_Rechts.docx).
   Tile «Chat mit Olivier» (UC_Home_Tiles, round photo instead of an icon) and the placeholder
   dialog dlgChat in _MasterHome (look of the login dialog). The live chat follows - home_chat.js
   only shows the sent message as a bubble. */

/* ---------- the tile: round photo with an «online» dot ---------- */
.tile .badge-photo{position:relative;width:48px;height:48px;border-radius:50%;overflow:visible;flex:none;display:block}
.tile .badge-photo img{display:block;width:48px;height:48px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--c)}
.tile .badge-photo .online{position:absolute;right:-1px;bottom:-1px;width:13px;height:13px;border-radius:50%;background:#25d366;border:2px solid var(--tile-bg,#fff)}
.tile-chat h3{color:inherit}
@media (max-width:1180px){.tile .badge-photo,.tile .badge-photo img{width:34px;height:34px}.tile .badge-photo .online{width:11px;height:11px}}

/* ---------- the dialog ---------- */
.chat-dlg{width:min(420px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:16px;overflow:hidden;
  background:#fff;color:#1d2840;box-shadow:0 30px 90px rgba(4,10,32,.55);font-family:inherit}
.chat-dlg::backdrop{background:rgba(6,14,40,.58);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.chat-dlg[open]{animation:chatIn .2s ease-out}
@keyframes chatIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html:not(.force-motion) .chat-dlg[open]{animation:none}}

.chat-head{position:relative;display:flex;align-items:center;gap:14px;padding:16px 60px 16px 18px;background:#0d1d47;color:#fff}
.chat-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #25d366;flex:none}
.chat-who b{display:block;font-size:1.05rem;font-weight:650}
.chat-who span{display:block;font-size:.86rem;color:rgba(255,255,255,.78)}
.chat-x{top:50%;transform:translateY(-50%)}

.chat-body{min-height:190px;max-height:min(46vh,360px);overflow-y:auto;padding:16px 18px;background:#f3f6fb;display:flex;flex-direction:column;gap:10px}
.chat-note{margin:0;padding:10px 14px;border-radius:12px;background:#fff;color:#4a5872;font-size:.9rem;line-height:1.45;border:1px solid #e3e9f3}
.chat-msg{align-self:flex-end;max-width:85%;margin:0;padding:9px 13px;border-radius:14px 14px 4px 14px;background:#dcf8c6;color:#1d2840;font-size:.94rem;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.chat-msg time{display:block;margin-top:3px;font-size:.72rem;color:#6b7a94;text-align:right}
.chat-sent{align-self:center;margin:0;font-size:.78rem;color:#6b7a94;text-align:center}

.chat-form{display:flex;align-items:flex-end;gap:10px;padding:12px 14px;border-top:1px solid #e3e9f3;background:#fff}
.chat-form textarea{flex:1;min-width:0;resize:none;padding:10px 12px;border:1px solid #cfd8e6;border-radius:12px;font:inherit;font-size:.95rem;line-height:1.35;color:#1d2840;background:#fff}
.chat-form textarea:focus{outline:none;border-color:#25d366;box-shadow:0 0 0 3px rgba(37,211,102,.22)}
.chat-send{flex:none;display:inline-flex;align-items:center;gap:6px;background:#25d366;color:#0d1d47;border:0;border-radius:999px;padding:10px 16px;font-weight:650;cursor:pointer}
.chat-send:hover{background:#1fbd59}
.chat-send .i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}