/* ============ THE WIRE — call + story dialogue, game-style, bottom of screen ============
     Replaces the old top-right #callcard. Everything a character SAYS lands here, one line at a
     time, typed out. Slaker keeps the transcript; this is the performance. Non-modal by design:
     it never takes focus, because the player may be mid-line in iTerminte. */
  #wire{position:absolute;left:50%;bottom:104px;z-index:135;width:min(760px,calc(100% - 60px));
    transform:translate(-50%,18px);opacity:0;pointer-events:none;transition:opacity .22s,transform .22s}
  #wire.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
  .wr-in{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;cursor:pointer;
    background:rgba(10,15,25,.93);backdrop-filter:blur(20px);
    border:1px solid var(--edge);border-left:3px solid var(--accent2);border-radius:12px;
    box-shadow:0 18px 50px rgba(0,0,0,.55)}
  .wr-who{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none;width:62px}
  .wr-av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:19px;
    background:linear-gradient(150deg,var(--accent2),#2b4a8f);position:relative;color:#fff;overflow:hidden}
  /* When the contact has a drawn mark it fills the circle, so the tile's own gradient is only ever
     seen behind a letter. overflow:hidden above is what clips the square artwork to the circle. */
  .wr-avico{width:100%;height:100%;display:block}
  #wire.ringing .wr-av::after{content:"";position:absolute;inset:-6px;border-radius:50%;
    border:2px solid var(--accent2);opacity:.5;animation:ring 1.3s ease-out infinite}
  @keyframes ring{from{transform:scale(.85);opacity:.6}to{transform:scale(1.35);opacity:0}}
  .wr-nm{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--ink-dim);
    text-transform:uppercase;text-align:center;line-height:1.2}
  .wr-body{flex:1;min-width:0}
  .wr-txt{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink);min-height:44px}
  .wr-txt.you{color:var(--accent);font-style:italic}
  .wr-txt::after{content:"▌";margin-left:2px;opacity:0;color:var(--accent2)}
  #wire.typing .wr-txt::after{opacity:1;animation:wrCaret .8s steps(1) infinite}
  @keyframes wrCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
  .wr-reps{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
  .wr-rep{padding:7px 13px;border:1px solid var(--edge);border-radius:8px;font-size:12.5px;
    color:var(--ink-dim);background:rgba(255,255,255,.03);text-align:left}
  .wr-rep:hover{border-color:var(--accent);color:var(--ink);background:rgba(var(--accent-rgb),.1)}
  .wr-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
  .wr-btns{display:flex;gap:8px}
  .wr-btns button{padding:8px 14px;border-radius:8px;font-size:12.5px;font-weight:600;
    border:1px solid var(--edge)}
  .wr-btns .acc{color:var(--green);border-color:rgba(40,200,64,.4)}
  .wr-btns .acc:hover{background:rgba(40,200,64,.16)}
  .wr-btns .dec{color:var(--red);border-color:rgba(255,95,87,.35)}
  .wr-btns .dec:hover{background:rgba(255,95,87,.14)}
  .wr-x{font-size:13px;color:var(--ink-faint);padding:2px 6px;border-radius:6px}
  .wr-x:hover{color:var(--ink);background:rgba(255,255,255,.07)}
  .wr-hint{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--ink-faint)}
  /* The player advances the dialogue, not a timer. Primary action in the bar. */
  .wr-next{padding:7px 13px;border-radius:8px;font-size:12.5px;font-weight:600;white-space:nowrap;
    border:1px solid rgba(var(--accent-rgb),.45);color:var(--accent);background:rgba(var(--accent-rgb),.1)}
  .wr-next:hover{background:rgba(var(--accent-rgb),.2);border-color:var(--accent)}
  body.reduce-motion #wire{transition:none}
  body.reduce-motion #wire.ringing .wr-av::after{animation:none;opacity:.5}

  #notifs{position:absolute;top:40px;right:14px;z-index:120;display:flex;flex-direction:column-reverse;
    gap:8px;align-items:flex-end;pointer-events:none}
  .notif{pointer-events:auto;min-width:230px;max-width:300px;background:rgba(18,24,38,.96);
    backdrop-filter:blur(16px);border:1px solid var(--edge);border-radius:11px;box-shadow:var(--shadow);
    padding:11px 13px;display:flex;gap:10px;align-items:flex-start;
    animation:notifIn .28s ease;transition:opacity .3s,transform .3s}
  .notif.out{opacity:0;transform:translateX(20px)}
  @keyframes notifIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
  .notif .ni{font-size:18px;line-height:1}
  .notif .nb{font-size:12.5px;line-height:1.4}
  .notif .nb b{display:block;font-size:12px;margin-bottom:1px}
  .notif .nb i.nc{display:block;margin-top:3px;font-style:normal;font-size:11px;color:var(--accent2)}
  .notif.ok{border-color:rgba(var(--accent-rgb),.5)} .notif.ok .nb b{color:var(--accent)}
  .notif.pay .nb b{color:var(--amber)}
  .notif.msg .nb b{color:var(--accent2)}
  .notif code{font-family:var(--mono);color:var(--amber);font-size:11.5px}