/* ============================================================
   PICTOCHAT — shared note-strip + draw-pad styling.
   Used by the homepage live-chat window (home-desktop.js) AND the
   /livechat archive. Neon-noir adaptation of the DS PictoChat look:
   a name tab on the left, a "paper" note (drawing + text) on the right.
   ============================================================ */

/* everything here is Share Tech Mono ("shade mono") + intentionally slim */
.pc-feed { display:flex; flex-direction:column; gap:0.28rem; font-family:var(--f-mono); }

/* a note = a thin accent bar on the left, a compact name+time header, content below.
   own messages tint to the secondary colour. (grid keeps the simple who/note/when DOM) */
.pc-msg { display:grid; grid-template-columns:1fr auto; grid-template-areas:"who when" "note note";
    gap:0 0.45rem; padding:0.22rem 0.45rem 0.26rem 0.5rem;
    border-left:2px solid rgba(var(--c-primary-rgb),0.5);
    background:linear-gradient(90deg, rgba(var(--c-primary-rgb),0.055), rgba(var(--c-primary-rgb),0) 60%);
    transition:background .15s ease; }
.pc-msg:hover { background:linear-gradient(90deg, rgba(var(--c-primary-rgb),0.1), rgba(var(--c-primary-rgb),0) 68%); }
.pc-msg.me { border-left-color:rgba(var(--c-secondary-rgb),0.65);
    background:linear-gradient(90deg, rgba(var(--c-secondary-rgb),0.065), rgba(var(--c-secondary-rgb),0) 60%); }

.pc-who { grid-area:who; font-family:var(--f-mono); font-size:10px; letter-spacing:0.02em; color:var(--c-primary);
    word-break:break-word; }
.pc-msg.me .pc-who { color:var(--c-secondary); }

.pc-when { grid-area:when; align-self:center; white-space:nowrap; font-family:var(--f-mono); font-size:8.5px;
    color:var(--c-text); opacity:0.35; }

.pc-note { grid-area:note; min-width:0; display:flex; flex-direction:column; gap:0.25rem; }
.pc-note:empty { display:none; }
.pc-draw { display:block; max-width:100%; height:auto; background:#f5f3ec; align-self:flex-start;
    border:1px solid rgba(var(--c-text-rgb),0.2); }
.pc-say { font-family:var(--f-mono); font-size:11.5px; line-height:1.4; color:var(--c-text);
    word-break:break-word; white-space:pre-wrap; }

/* ===== draw pad (composer — homepage window only) ===== */
.pc-pad { display:block; width:100%; height:84px; box-sizing:border-box; background:#f5f3ec; cursor:crosshair;
    border:1px solid rgba(var(--c-primary-rgb),0.4); touch-action:none; }
.pc-tools { display:flex; align-items:center; gap:0.35rem; margin-top:0.4rem; flex-wrap:wrap; }
.pc-tool { font-family:var(--f-mono); font-size:10.5px; cursor:pointer; padding:0.26rem 0.5rem; color:var(--c-text);
    background:rgba(var(--c-text-rgb),0.06); border:1px solid rgba(var(--c-primary-rgb),0.35); display:inline-flex;
    align-items:center; gap:0.3rem; transition:all .14s ease; }
.pc-tool:hover { border-color:var(--c-primary); }
.pc-tool.on { color:var(--c-bg); background:var(--c-primary); border-color:var(--c-primary); }
.pc-tool.pc-clear:hover { color:var(--c-secondary); border-color:var(--c-secondary); }