.chat-page { margin:0; color:#fff6ea; background:#111428; font:16px system-ui,sans-serif; }
.chat-page * { box-sizing:border-box; }
.chat-page [hidden] { display:none !important; }
.chat-page a { color:#eedbff; }
.chat-page button,.chat-page select,.chat-page textarea,.chat-page input { font:inherit; }
.chat-page button,.chat-attach { cursor:pointer; padding:.62rem .8rem; border:1px solid #84799c; background:#3c3058; color:#fff; border-radius:13px; }
.chat-page button:disabled { opacity:.52; cursor:default; }
.chat-shell { margin:auto; max-width:850px; height:100vh; height:100dvh; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; background-color:#1b2039; background-image:linear-gradient(rgb(14 17 34 / var(--dim,.52)),rgb(14 17 34 / var(--dim,.52))),var(--wall,radial-gradient(ellipse at top,#5b427a,#192241 58%,#14142a)); background-size:cover; background-position:center; background-repeat:no-repeat; }
.chat-bar { grid-row:1; background:rgb(27 32 57 / .72); display:grid; grid-template-columns:auto 1fr auto; align-items:center; text-align:center; gap:.6rem; padding:calc(.65rem + env(safe-area-inset-top)) .8rem .65rem; }
.chat-bar h1 { font:clamp(1.2rem,5vw,1.65rem) Georgia,serif; margin:0 0 .15rem; }
.chat-bar small,#chat-status,.chat-help { color:#ddd2ef; }
#chat-status { grid-row:2; margin:0; padding:.3rem .85rem; font-size:.82rem; }
#chat-status:empty { display:none; }
.chat-thread { grid-row:3; overflow:auto; overscroll-behavior:contain; padding:.85rem; }
#chat-older { display:block; margin:0 auto .5rem; }
#chat-empty { text-align:center; }
#chat-messages { display:flex; flex-direction:column; gap:.65rem; padding:0; margin:0; list-style:none; }
.chat-bubble { align-self:flex-start; max-width:min(84%,540px); background:#25334d; padding:.65rem .8rem; border-radius:16px 16px 16px 4px; box-shadow:0 2px 8px #08091452; }
.chat-bubble.mine { align-self:flex-end; background:#563c76; border-radius:16px 16px 4px 16px; }
.chat-bubble p { margin:.2rem 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-bubble time { font-size:.71rem; color:#e1d5f0; display:block; margin-top:.35rem; }
.chat-bubble .chat-photo-button { background:none; padding:0; border:0; }
.chat-bubble img,#chat-image img { display:block; max-width:100%; max-height:64dvh; object-fit:contain; border-radius:9px; }
#chat-compose { grid-row:4; background:rgb(27 32 57 / .72); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.5rem; padding:.6rem .7rem calc(.6rem + env(safe-area-inset-bottom)); }
#chat-text { resize:none; min-width:0; padding:.5rem; color:#fff; background:#242b46; border:1px solid #84799c; border-radius:10px; }
.chat-attach { position:relative; overflow:hidden; }
.chat-attach input { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
.chat-attach:focus-within { outline:2px solid #fff; }
#chat-attachment { grid-column:1/-1; overflow-wrap:anywhere; }
.chat-page dialog { max-width:min(92vw,540px); max-height:85dvh; overflow:auto; background:#222844; color:#fff; border:1px solid #84799c; border-radius:16px; padding:1rem; }
.chat-page dialog::backdrop { background:#090b1ad9; }
#chat-wallpaper label { display:grid; gap:.25rem; margin:.7rem 0; }
#chat-wallpaper select { width:100%; min-width:0; padding:.4rem; }
.chat-help { font-size:.88rem; }
.chat-mini .chat-bar { grid-template-columns: minmax(0,1fr) auto; padding: .45rem .65rem; }
.chat-mini .chat-bar h1 { font-size: 1.2rem; }
.chat-mini .chat-bar small { font-size: .78rem; }
.chat-mini #chat-compose { padding-bottom: .6rem; }

.chat-tools { display:flex; gap:.25rem; }
.chat-tools button { padding:.5rem .55rem; }

.chat-tools .chat-incoming-call { background:#724076; border-color:#f7bedf; }