/* =====================================================
   IZU CHAT — style.css (v4)
   ===================================================== */

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  --bg:         #0B0C10;
  --surface:    #12131B;
  --surface2:   #1B1C28;
  --border:     #24253A;
  --accent:     #7C5DFA;
  --accent-dim: rgba(124,93,250,.18);
  --accent-glow:rgba(124,93,250,.38);
  --own-grad:   linear-gradient(135deg,#7C5DFA 0%,#9D7BFF 100%);
  --other-bg:   #1B1C28;
  --text:       #E4E4F0;
  --muted:      #55566E;
  --green:      #30D9A0;
  --amber:      #FBBF24;
  --danger:     #EF4444;
  --mono:       'Fira Code','Cascadia Code',Consolas,monospace;
  --radius:     20px;
  --radius-sm:  12px;
  --sans:       'Inter',system-ui,sans-serif;
  --display:    'Syne',system-ui,sans-serif;
}

html,body { height:100%; font-family:var(--sans); background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; overflow:hidden; }
button { cursor:pointer; font-family:inherit; }
.hidden { display:none !important; }

/* ── Join Screen ──────────────────────────────────── */

#join-screen {
  height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse 70% 55% at 65% 35%,rgba(124,93,250,.2) 0%,transparent 70%),
    radial-gradient(ellipse 45% 40% at 18% 80%,rgba(255,107,157,.1) 0%,transparent 60%),
    var(--bg);
}
.join-card {
  width:min(420px,calc(100vw - 32px)); padding:48px 36px;
  background:var(--surface); border:1px solid var(--border); border-radius:28px;
  text-align:center; box-shadow:0 0 90px rgba(124,93,250,.13),0 20px 60px rgba(0,0,0,.5);
}
.brand { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:8px; }
.bolt  { font-size:2.4rem; animation:flicker 4s ease infinite; filter:drop-shadow(0 0 14px #7C5DFA); }

@keyframes flicker {
  0%,88%,100% { filter:drop-shadow(0 0 14px #7C5DFA); }
  90%         { filter:drop-shadow(0 0  4px #7C5DFA); }
  94%         { filter:drop-shadow(0 0 22px #9D7BFF); }
}

.brand-name {
  font-family:var(--display); font-size:2.4rem; font-weight:800; letter-spacing:-1px;
  background:linear-gradient(135deg,#7C5DFA 0%,#A78BFA 55%,#D4BBFF 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.brand-tagline { font-size:.86rem; color:var(--muted); margin-bottom:34px; line-height:1.6; }
.join-form     { display:flex; flex-direction:column; gap:11px; }
.join-form input {
  width:100%; padding:13px 18px;
  background:var(--surface2); border:1.5px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text); font-size:.95rem; font-family:var(--sans); outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.join-form input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.join-form input::placeholder { color:var(--muted); }
.join-form input.shake { animation:shake .35s ease; }

@keyframes shake {
  0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}
  40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}
}

#join-btn {
  width:100%; padding:13px;
  background:linear-gradient(135deg,#7C5DFA,#9D7BFF); border:none; border-radius:var(--radius-sm);
  color:#fff; font-size:.95rem; font-weight:600;
  box-shadow:0 4px 22px rgba(124,93,250,.45); transition:opacity .2s,transform .15s;
}
#join-btn:hover  { opacity:.88; transform:translateY(-1px); }
#join-btn:active { opacity:1;   transform:translateY(0); }
.join-note { margin-top:18px; font-size:.74rem; color:var(--muted); }

/* ── Chat Screen ──────────────────────────────────── */

#chat-screen { height:100vh; display:flex; flex-direction:column; overflow:hidden; }

.top-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 18px; background:var(--surface); border-bottom:1px solid var(--border);
  flex-shrink:0; gap:8px;
}
.bar-left  { display:flex; align-items:center; gap:10px; }
.bar-right { display:flex; align-items:center; gap:8px;  }

.bolt-sm { font-size:1.2rem; filter:drop-shadow(0 0 8px #7C5DFA); animation:flicker 4s ease infinite; }
.brand-sm {
  font-family:var(--display); font-size:1.15rem; font-weight:800; letter-spacing:-.4px;
  background:linear-gradient(135deg,#7C5DFA,#A78BFA);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.live-pill {
  display:flex; align-items:center; gap:5px; padding:4px 10px;
  background:rgba(48,217,160,.1); border:1px solid rgba(48,217,160,.25); border-radius:20px;
  font-size:.72rem; font-weight:600; color:var(--green);
}
.live-dot { width:6px; height:6px; border-radius:50%; background:var(--green); animation:live-pulse 2s ease infinite; }
@keyframes live-pulse { 0%,100%{opacity:1}50%{opacity:.4} }

#you-label {
  font-size:.78rem; font-weight:600; color:var(--muted);
  background:var(--surface2); border:1px solid var(--border);
  padding:4px 12px; border-radius:16px;
  white-space:nowrap; max-width:130px; overflow:hidden; text-overflow:ellipsis;
}
.icon-btn {
  background:var(--surface2); border:1px solid var(--border);
  border-radius:10px; padding:6px 10px; font-size:.88rem; color:var(--muted);
  transition:border-color .2s,color .2s,background .2s;
}
.icon-btn:hover { border-color:var(--accent); color:var(--accent); }
#notif-btn.enabled,#sound-btn.enabled,#emoji-btn.active {
  background:var(--accent-dim); border-color:var(--accent); color:var(--accent);
}

/* ── Messages Feed ────────────────────────────────── */

.messages {
  flex:1; overflow-y:auto; padding:20px 16px 12px;
  display:flex; flex-direction:column; gap:2px; scroll-behavior:smooth;
}
.messages::-webkit-scrollbar       { width:4px; }
.messages::-webkit-scrollbar-track { background:transparent; }
.messages::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.room-intro { text-align:center; padding:30px 16px 20px; color:var(--muted); font-size:.88rem; line-height:1.65; }
.intro-bolt { display:block; font-size:2.5rem; margin-bottom:12px; filter:drop-shadow(0 0 18px #7C5DFA); animation:flicker 4s ease infinite; }

/* ── Date Separator ───────────────────────────────── */

.date-sep { display:flex; align-items:center; gap:12px; margin:14px 0 8px; flex-shrink:0; }
.date-sep::before,.date-sep::after { content:""; flex:1; height:1px; background:var(--border); }
.date-sep span {
  font-size:.7rem; color:var(--muted); white-space:nowrap;
  padding:3px 10px; background:var(--surface2); border:1px solid var(--border); border-radius:20px;
}

/* ── Message Rows ─────────────────────────────────── */

.msg-row {
  display:flex; flex-direction:column; max-width:74%;
  animation:msg-pop .22s cubic-bezier(.34,1.56,.64,1) both;
  margin-bottom:2px;
}
@keyframes msg-pop {
  from{opacity:0;transform:translateY(10px) scale(.96)}
  to  {opacity:1;transform:none}
}
.msg-row.own   { align-self:flex-end;   align-items:flex-end; }
.msg-row.other { align-self:flex-start; align-items:flex-start; }

/* NEW: Grouped messages — hide meta, tighten gap, soften corners */
.msg-row.grouped             { margin-top:1px; }
.msg-row.grouped .msg-meta   { display:none; }
.msg-row.grouped.other .msg-bubble { border-top-left-radius:4px; }
.msg-row.grouped.own   .msg-bubble { border-top-right-radius:4px; }

.msg-meta {
  display:flex; align-items:center; gap:6px;
  font-size:.68rem; color:var(--muted); padding:0 4px; margin-bottom:3px;
}
.msg-meta .u-name { font-weight:600; }

/* Content wrapper: bubble + hover actions side by side */
.msg-content { display:flex; align-items:flex-end; gap:4px; position:relative; }
.msg-row.own .msg-content { flex-direction:row-reverse; }

.msg-bubble {
  padding:9px 15px; border-radius:18px;
  font-size:.91rem; line-height:1.55; word-break:break-word; max-width:100%;
}
.msg-row.own .msg-bubble {
  background:var(--own-grad); color:#fff;
  border-bottom-right-radius:4px; box-shadow:0 3px 18px rgba(124,93,250,.35);
}
.msg-row.other .msg-bubble {
  background:var(--other-bg); color:var(--text);
  border:1px solid var(--border); border-bottom-left-radius:4px;
}

/* Flash ring on new incoming */
.msg-row.flash .msg-bubble {
  animation:msg-pop .22s cubic-bezier(.34,1.56,.64,1) both,flash-ring .65s ease .15s;
}
@keyframes flash-ring {
  0%   {box-shadow:0 0 0 0 rgba(124,93,250,.65)}
  100% {box-shadow:0 0 0 10px rgba(124,93,250,0)}
}

/* Highlight when jumped to via reply */
.msg-row.highlight .msg-bubble { animation:hl-pulse .7s ease; }
@keyframes hl-pulse {
  0%,100%{box-shadow:none}
  30%,70%{box-shadow:0 0 0 3px rgba(124,93,250,.55)}
}

/* Fade out on delete */
.msg-row.deleting { pointer-events:none; transition:opacity .25s ease,transform .25s ease; }

/* URLs */
.msg-link { color:#A78BFA; text-decoration:underline; text-underline-offset:2px; word-break:break-all; }
.msg-row.own .msg-bubble .msg-link { color:rgba(255,255,255,.85); }
.msg-link:hover { color:#D4BBFF; }

/* NEW: "(edited)" marker */
.edit-mark { font-size:.7rem; font-style:italic; color:var(--muted); margin-left:3px; }
.msg-row.own .msg-bubble .edit-mark { color:rgba(255,255,255,.45); }

/* ── NEW: Quote Block (reply preview inside bubble) ── */

.quote-block {
  border-left:3px solid var(--accent);
  padding:4px 8px; border-radius:0 6px 6px 0;
  margin-bottom:7px; cursor:pointer;
  background:rgba(0,0,0,.25); transition:background .15s;
  max-width:100%; overflow:hidden;
}
.quote-block:hover { background:rgba(0,0,0,.38); }
.quote-name  { font-size:.72rem; font-weight:600; display:block; margin-bottom:2px; }
.quote-text  { font-size:.8rem; color:var(--muted); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Own bubble quote adjustments */
.msg-row.own .quote-block  { background:rgba(0,0,0,.22); }
.msg-row.own .quote-name   { color:rgba(255,255,255,.9) !important; }
.msg-row.own .quote-text   { color:rgba(255,255,255,.55); }

/* ── NEW: Code Formatting ─────────────────────────── */

/* Code block (```) */
.code-block {
  position:relative;
  background:#0D0E14; border:1px solid var(--border); border-radius:8px;
  padding:10px 38px 10px 14px; margin:6px 0;
  overflow-x:auto; max-width:100%;
}
.code-block code {
  font-family:var(--mono); font-size:.8rem; line-height:1.55;
  color:#A78BFA; white-space:pre; display:block;
}
.msg-row.own .msg-bubble .code-block         { background:rgba(0,0,0,.3); border-color:rgba(255,255,255,.12); }
.msg-row.own .msg-bubble .code-block code    { color:#D4BBFF; }

/* Copy button inside code block */
.code-copy {
  position:absolute; top:7px; right:7px;
  background:var(--surface2); border:1px solid var(--border); border-radius:5px;
  color:var(--muted); font-size:.68rem; padding:2px 7px; font-family:var(--sans);
  transition:color .15s,border-color .15s;
}
.code-copy:hover { color:var(--text); border-color:var(--accent); }
.code-copy.copied { color:var(--green); border-color:var(--green); }

/* Inline code (`code`) */
.inline-code {
  font-family:var(--mono); font-size:.85em; padding:1px 5px;
  background:rgba(124,93,250,.15); border:1px solid rgba(124,93,250,.25);
  border-radius:4px; color:#A78BFA;
}
.msg-row.own .msg-bubble .inline-code {
  background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.22); color:#fff;
}

/* ── Hover Action Buttons ─────────────────────────── */

.msg-actions {
  display:flex; flex-direction:column; gap:3px;
  opacity:0; pointer-events:none; transition:opacity .15s; flex-shrink:0;
}
.msg-row:hover .msg-actions { opacity:1; pointer-events:auto; }

.action-btn {
  background:var(--surface2); border:1px solid var(--border); border-radius:8px;
  padding:4px 6px; font-size:.82rem; color:var(--muted); line-height:1;
  transition:all .15s; white-space:nowrap;
}
.action-btn:hover           { border-color:var(--accent); color:var(--accent); }
.action-btn.del-btn:hover   { border-color:var(--danger); color:var(--danger); }
.action-btn.edit-btn:hover  { border-color:var(--amber);  color:var(--amber);  }

/* ── Reaction Picker & Chips ──────────────────────── */

.reaction-picker {
  display:none; flex-wrap:nowrap; gap:2px; padding:5px 8px;
  background:var(--surface2); border:1px solid var(--border); border-radius:30px;
  box-shadow:0 6px 24px rgba(0,0,0,.5); margin-top:5px;
}
.msg-row.picking .reaction-picker { display:flex; }

.react-emoji-btn { background:none; border:none; font-size:1.25rem; padding:3px 4px; border-radius:6px; line-height:1; transition:transform .1s; }
.react-emoji-btn:hover  { transform:scale(1.35); }
.react-emoji-btn:active { transform:scale(1.1);  }

.reaction-row { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; padding:0 2px; }
.reaction-chip {
  display:inline-flex; align-items:center; gap:3px; padding:3px 8px;
  background:var(--surface2); border:1px solid var(--border); border-radius:20px;
  font-size:.78rem; cursor:pointer; line-height:1; transition:border-color .15s,background .15s;
}
.reaction-chip:hover { border-color:var(--accent); }
.reaction-chip.mine  { border-color:var(--accent); background:var(--accent-dim); }

/* ── Image Lightbox ───────────────────────────────── */

.lightbox { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; }
.lb-bg    { position:absolute; inset:0; background:rgba(0,0,0,.92); cursor:pointer; backdrop-filter:blur(4px); }
.lb-img   {
  position:relative; z-index:1;
  max-width:90vw; max-height:88vh; border-radius:14px; object-fit:contain;
  box-shadow:0 0 60px rgba(124,93,250,.25); animation:lb-in .2s ease both;
}
@keyframes lb-in { from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)} }
.lb-close {
  position:absolute; top:16px; right:16px; z-index:2;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  color:#fff; font-size:1rem; display:flex; align-items:center; justify-content:center;
  transition:background .15s;
}
.lb-close:hover { background:rgba(255,255,255,.22); }

/* ── File Bubbles ─────────────────────────────────── */

.file-bubble {
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:rgba(124,93,250,.1); border:1px solid rgba(124,93,250,.3); border-radius:14px;
  text-decoration:none; color:inherit; max-width:260px; transition:background .2s;
}
.file-bubble:hover { background:rgba(124,93,250,.2); }
.f-icon { font-size:1.5rem; flex-shrink:0; }
.f-name { font-size:.83rem; font-weight:600; color:var(--text); word-break:break-all; }
.f-size { font-size:.7rem;  color:var(--muted); margin-top:2px; }

.img-bubble {
  max-width:220px; border-radius:14px; cursor:zoom-in;
  border:1px solid var(--border); display:block;
  transition:transform .2s,box-shadow .2s;
}
.img-bubble:hover { transform:scale(1.02); box-shadow:0 4px 20px rgba(124,93,250,.3); }

/* ── Typing Indicator ─────────────────────────────── */

.typing-bar { display:flex; align-items:center; gap:8px; padding:5px 20px; font-size:.75rem; color:var(--muted); flex-shrink:0; min-height:28px; }
.typing-dots { display:flex; gap:3px; }
.typing-dots span { width:5px; height:5px; border-radius:50%; background:var(--accent); animation:tdot 1.3s ease infinite; }
.typing-dots span:nth-child(2){animation-delay:.2s}
.typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes tdot { 0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-5px);opacity:1} }

/* ── In-App Toast ─────────────────────────────────── */

.in-app-toast {
  position:fixed; top:68px; right:14px; z-index:200;
  background:var(--surface2); border:1px solid var(--accent); border-radius:var(--radius-sm);
  padding:10px 15px; font-size:.8rem; max-width:270px; line-height:1.5;
  box-shadow:0 0 24px var(--accent-glow),0 8px 30px rgba(0,0,0,.5);
  animation:toast-slide .25s ease both; pointer-events:none;
}
@keyframes toast-slide { from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none} }
.in-app-toast .t-name { font-weight:600; }

/* ── Scroll Button ────────────────────────────────── */

.scroll-btn {
  position:fixed; bottom:78px; right:18px; z-index:100;
  width:36px; height:36px; border-radius:50%;
  background:var(--surface2); border:1.5px solid var(--accent);
  color:var(--accent); font-size:1.1rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 18px rgba(124,93,250,.4); transition:transform .15s;
  animation:toast-slide .2s ease both;
}
.scroll-btn:hover  { transform:scale(1.1);  }
.scroll-btn:active { transform:scale(.92);  }

/* ── Input Area ───────────────────────────────────── */

.input-area { position:relative; flex-shrink:0; }

/* NEW: Context bars (reply / edit) */
.context-bar {
  display:flex; align-items:center; gap:10px;
  padding:8px 14px;
  background:var(--surface2); border-top:2px solid var(--accent);
  font-size:.82rem; animation:ctx-in .18s ease both;
}
@keyframes ctx-in { from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none} }

#edit-bar { border-top-color:var(--amber); }

.ctx-icon  { font-size:1rem; flex-shrink:0; }
.ctx-info  { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ctx-label { font-size:.7rem; font-weight:600; color:var(--accent); }
#edit-bar .ctx-label { color:var(--amber); }
.ctx-preview { font-size:.8rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ctx-cancel {
  background:none; border:none; color:var(--muted); font-size:1rem;
  padding:4px 6px; border-radius:50%; line-height:1; transition:color .15s,background .15s;
}
.ctx-cancel:hover { color:var(--text); background:var(--border); }

.emoji-panel {
  position:absolute; bottom:100%; left:0; right:0;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:16px 16px 0 0; padding:10px 12px 6px;
  display:grid; grid-template-columns:repeat(8,1fr); gap:2px;
  box-shadow:0 -8px 30px rgba(0,0,0,.4); z-index:50;
  max-height:180px; overflow-y:auto;
}
.emoji-panel::-webkit-scrollbar       { width:3px; }
.emoji-panel::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.emoji-item { background:transparent; border:none; font-size:1.35rem; padding:5px 2px; border-radius:8px; line-height:1; transition:background .15s,transform .1s; }
.emoji-item:hover  { background:var(--border); transform:scale(1.2); }
.emoji-item:active { transform:scale(1.0); }

/* ── Input Row ────────────────────────────────────── */

.input-row {
  display:flex; align-items:center; gap:8px; padding:11px 14px;
  background:var(--surface); border-top:1px solid var(--border);
}
#msg-input {
  flex:1; min-width:0; padding:11px 16px;
  background:var(--surface2); border:1.5px solid var(--border); border-radius:24px;
  color:var(--text); font-size:.91rem; font-family:var(--sans); outline:none;
  transition:border-color .2s,box-shadow .2s;
}
#msg-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
#msg-input::placeholder { color:var(--muted); }

/* Edit mode: tint the input */
#msg-input.editing-mode { border-color:var(--amber); box-shadow:0 0 0 3px rgba(251,191,36,.15); }

.char-counter { font-size:.72rem; min-width:28px; text-align:right; flex-shrink:0; font-variant-numeric:tabular-nums; transition:color .2s; }
.char-counter.warn   { color:var(--amber); }
.char-counter.danger { color:var(--danger); font-weight:600; }

.send-btn {
  width:42px; height:42px; flex-shrink:0; border-radius:50%;
  background:linear-gradient(135deg,#7C5DFA,#9D7BFF); border:none;
  color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 16px rgba(124,93,250,.5); transition:transform .15s;
}
.send-btn svg    { width:16px; height:16px; }
.send-btn:hover  { transform:scale(1.07); }
.send-btn:active { transform:scale(.94);  }

/* Edit mode: amber send button */
.send-btn.editing { background:linear-gradient(135deg,#FBBF24,#F59E0B); }

.rate-bar {
  text-align:center; padding:5px; font-size:.76rem; color:var(--amber);
  background:rgba(251,191,36,.07); border-top:1px solid rgba(251,191,36,.2); flex-shrink:0;
}

/* ── Mobile ───────────────────────────────────────── */

@media (max-width:520px) {
  .join-card   { padding:36px 20px; }
  .brand-name  { font-size:2rem; }
  .msg-row     { max-width:90%; }
  .top-bar     { padding:11px 12px; }
  #you-label   { display:none; }
  .brand-sm    { font-size:1rem; }
  .emoji-panel { grid-template-columns:repeat(6,1fr); }
  .scroll-btn  { bottom:72px; right:12px; }
}