/* chat-enamel.css: The Hailing Shell in the enamel-and-wire treatment from KnifeSurveyor (cal-enamel.css / Command Center panels),
   in Sullivania's Sea Glass palette (Neo, 2026-11-02; enamel taken DARK green the same day). One thin polished-silver wire lit from above (#e4e9e5 top / #9aa29c sides /
   #5f6862 bottom) with a dark seam inside; glossy green enamel bands split-lit at the middle, words engraved to silver; bubbles are
   little enamel pills set in silver wire, like cloisonne; the send button is the one lit thing. All borders 1px. Loaded after chat.css. */
:root{--wire-t:#e4e9e5;--wire-s:#9aa29c;--wire-b:#5f6862;--seam:inset 0 0 0 1px rgba(0,0,0,.55);
 --gloss:radial-gradient(130% 160% at 50% -60%,rgba(255,255,255,.24) 0,rgba(255,255,255,.07) 48%,rgba(255,255,255,0) 49%);
 --pill:radial-gradient(120% 160% at 50% -70%,rgba(255,255,255,.2) 0,rgba(255,255,255,.055) 48%,rgba(255,255,255,0) 49%);
 --engrave:0 -1px 0 rgba(0,0,0,.85),0 -1px 2px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.22)}
/* the page column: edged in pewter-silver wire, a black line either side so the wire reads crisp */
.app{border-left:1px solid #aab2ac;border-right:1px solid #aab2ac;box-shadow:inset 1px 0 0 #000,inset -1px 0 0 #000,-1px 0 0 #000,1px 0 0 #000,0 0 40px #000}
/* header + message bar: green enamel bands in one silver wire */
.hd,.bar{margin:10px 10px 0;border:1px solid;border-color:var(--wire-t) var(--wire-s) var(--wire-b);border-radius:14px;
 background:var(--gloss),linear-gradient(180deg,#0d3a2b 0,#08281e 46%,#041912 100%);
 box-shadow:var(--seam),inset 0 3px 5px rgba(0,0,0,.4),inset 0 -2px 6px rgba(120,220,170,.14),0 4px 14px rgba(0,0,0,.65)}
.bar{margin:0 10px 10px}
.ti b{color:#dfe6e1;text-shadow:var(--engrave)}.ti small{color:#a9c4b9;text-shadow:0 -1px 0 rgba(0,0,0,.7)}
.av{filter:drop-shadow(0 2px 2px rgba(0,0,0,.7))}
/* the side switch: dark glass set in silver wire */
.side,.who button{box-shadow:none;border:1px solid rgba(201,208,203,.55);color:#e6eeea;
 background:linear-gradient(180deg,rgba(255,255,255,.12) 0,rgba(255,255,255,.03) 48%,rgba(0,0,0,0) 49%),#06201a;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(0,0,0,.5)}
.side:hover,.who button:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(0,0,0,.5);border-color:var(--wire-t);background-color:#0b3327}
.who button.on{border-color:var(--wire-t);color:#fff;background:var(--pill),linear-gradient(180deg,#0d5636,#073a24);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 10px rgba(43,238,116,.3)}
/* message bubbles: enamel pills in thin silver wire */
.m{border:1px solid rgba(201,208,203,.5);background:var(--pill),linear-gradient(180deg,#1c3b37,#11272a);
 box-shadow:inset 0 0 0 1px rgba(0,0,0,.32),0 2px 6px rgba(0,0,0,.6);text-shadow:0 1px 1px rgba(0,0,0,.45)}
.m.me{border-color:rgba(214,226,219,.62);background:var(--pill),linear-gradient(180deg,#0d5636,#073a24)}
.m.me .t{color:#b9dcc8}
/* the day marker: a small enamel pill in wire */
.day{border:1px solid rgba(201,208,203,.45);background:var(--pill),linear-gradient(180deg,#163631,#0c2220);color:#c6d6cf;box-shadow:var(--seam),0 2px 4px #000;text-shadow:0 -1px 0 rgba(0,0,0,.7)}
/* typing well: sunk into the enamel, its wire lit from below */
#txt,.gate input{border:1px solid;border-color:#2c3430 #5f6862 var(--wire-s);background:#030807;box-shadow:inset 0 2px 5px rgba(0,0,0,.8)}
#txt:focus,.gate input:focus{border-color:#4a5550 var(--wire-s) var(--wire-t)}
/* the one lit thing: send, a domed emerald enamel bead in a polished wire rim */
.bar button,.go{border:1px solid var(--wire-t);
 background:radial-gradient(120% 120% at 50% -30%,rgba(255,255,255,.4) 0,rgba(255,255,255,.1) 48%,rgba(255,255,255,0) 49%),linear-gradient(180deg,#138050 0,#0b5e37 55%,#064023 100%);
 box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.6),0 0 14px rgba(43,238,116,.3);text-shadow:0 1px 1px rgba(0,0,0,.45)}
.bar button:hover,.go:hover{background:radial-gradient(120% 120% at 50% -30%,rgba(255,255,255,.46) 0,rgba(255,255,255,.12) 48%,rgba(255,255,255,0) 49%),linear-gradient(180deg,#18925b 0,#0e6c40 55%,#084b2a 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.6),0 0 20px rgba(43,238,116,.45)}
.gate b{color:#dfe6e1;text-shadow:var(--engrave)}
@media(max-width:700px){.hd{margin:6px 6px 0}.bar{margin:0 6px 6px}}

/* sealed end to end: the promise, said plainly (Neo, 2026-11-02) */
.sealed{align-self:center;margin:2px 0 6px;padding:3px 14px;border-radius:9px;font:400 13.5px Alegreya;color:#9fd9b8;letter-spacing:.02em;
 border:1px solid rgba(201,208,203,.4);background:var(--pill),linear-gradient(180deg,#0b2a1f,#061a13);box-shadow:var(--seam),0 2px 4px #000;text-shadow:0 -1px 0 rgba(0,0,0,.7)}
.promise{max-width:380px;margin:0 0 6px;text-align:center;font:400 15px/1.35 Alegreya;color:#b9d2c7}
.nokey{color:var(--spray)}
.go:disabled{opacity:.7;cursor:wait}

/* the way back (HARD RULE: no page is ever stranded): dark glass in silver wire, first thing in the header */
.back{flex:none;padding:4px 12px;border-radius:14px;font:400 15px Alegreya;color:#e6eeea;text-decoration:none;cursor:pointer;border:1px solid rgba(201,208,203,.55);
 background:linear-gradient(180deg,rgba(255,255,255,.12) 0,rgba(255,255,255,.03) 48%,rgba(0,0,0,0) 49%),#06201a;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(0,0,0,.5)}
.back:hover{border-color:var(--wire-t);background-color:#0b3327}
.av{height:44px}
.gate{padding-top:84px}
.gate img{height:104px}.av{height:48px}