/* The Hailing Shell: a WhatsApp-style chat in Sullivania's deep-sea palette.
   PALETTE "Sea Glass" (default). Every color comes from the site's own art; each has one job:
   --abyss    #04090a  page ground: the darkest pane of the wizard window (#060f10), one step deeper
   --trench   #0a1517  header and message bar: dark water just under the surface
   --kelp     #1a302e  their bubble: the wizard window's mid sea-glass (#152727 to #2d4641)
   --emerald  #0d5a3d  my bubble: the plaque's emerald glow (#0f7f4d), sunk a few fathoms so it reads as glass, not neon
   --rim      #6f9189  bubble borders: the wizard window's lead-light highlight (#4f6e67 to #86aca4)
   --foam     #e6eeea  message text: the site's silver (#c9d0cb), lifted for reading on colored glass
   --spray    #9db8ae  times and quiet labels
   --lamp     #7fd0a6  names: the lighthouse-green signal, the only bright color, used small
   Picked by Neo 2026-11-02 over Before and Night Harbor (sheet: design/samples/sullivania-chat-palette.html). */
@font-face{font-family:AlmB;src:url(fonts/Almendra-Bold.woff2) format("woff2");font-display:swap}@font-face{font-family:Caudex;src:url(fonts/Caudex-Regular.woff2) format("woff2");font-display:swap}@font-face{font-family:Alegreya;src:url(fonts/alegreya-sans-normal-400.woff2);font-display:swap}
:root{--abyss:#04090a;--trench:#0a1517;--kelp:#1a302e;--kelp2:#10201f;--emerald:#0d5a3d;--emerald2:#08402b;--rim:#6f9189;--rim-me:#3fae7c;--foam:#e6eeea;--spray:#9db8ae;--lamp:#7fd0a6;--tint:rgba(3,10,11,.86);--act:#12683a;--act2:#178a4b;--glass:1}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--abyss);color:var(--foam);font:400 17px/1.35 Caudex,serif}
button{font:inherit;color:inherit;cursor:pointer}
.app{display:flex;flex-direction:column;height:100%;max-width:980px;margin:auto;background:linear-gradient(var(--tint),var(--tint)),url(art/dock-wall.webp?v=2) center top/1500px auto,var(--abyss);box-shadow:0 0 0 1px #000,0 0 40px #000}
/* bars: dark water with a thin lit edge where they meet the page */
.hd,.bar{background:linear-gradient(rgba(255,255,255,calc(.07*var(--glass))),rgba(255,255,255,0) 50%),var(--trench)}
.hd{display:flex;align-items:center;gap:12px;padding:8px 16px;box-shadow:0 1px 0 rgba(160,200,190,calc(.22*var(--glass) + .08)),0 6px 16px rgba(0,0,0,.65);z-index:1}
.av{height:40px;width:auto}.ti{flex:1;min-width:0}.ti b{display:block;font:400 21px/1.1 AlmB,serif}.ti small{font:400 14px Alegreya;color:var(--spray)}
.side{all:unset;cursor:pointer;padding:3px 12px;border-radius:14px;font:400 15px Alegreya;box-shadow:inset 0 0 0 1px var(--rim)}.side:hover{box-shadow:inset 0 0 0 1px var(--lamp)}
.log{flex:1;overflow-y:auto;padding:14px 6% 12px;display:flex;flex-direction:column;gap:4px}
.day{align-self:center;margin:12px 0 8px;padding:3px 13px;border-radius:9px;background:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,0) 50%),var(--trench);font:400 13.5px Alegreya;color:var(--spray);box-shadow:inset 0 0 0 1px rgba(160,200,190,.18),0 2px 4px #000}
.still{align-self:center;margin-top:30vh;color:var(--spray);font:400 16px Alegreya}
/* the bubbles: sea glass. Light from above (bright top half, split at the middle like the site's other glass), a lit rim, a dark drop shadow */
.m{position:relative;max-width:min(75%,560px);padding:7px 11px 7px 12px;border-radius:14px;align-self:flex-start;overflow-wrap:anywhere;white-space:pre-wrap;
 background:linear-gradient(rgba(255,255,255,calc(.13*var(--glass))),rgba(255,255,255,calc(.04*var(--glass))) 48%,rgba(0,0,0,0) 52%,rgba(0,0,0,calc(.16*var(--glass)))),linear-gradient(var(--kelp),var(--kelp2));
 border:1px solid var(--rim);box-shadow:inset 0 1px 0 rgba(255,255,255,calc(.28*var(--glass))),inset 0 -1px 0 rgba(0,0,0,.35),0 3px 8px rgba(0,0,0,.6)}
.m.me{align-self:flex-end;border-color:var(--rim-me);background:linear-gradient(rgba(255,255,255,calc(.15*var(--glass))),rgba(255,255,255,calc(.05*var(--glass))) 48%,rgba(0,0,0,0) 52%,rgba(0,0,0,calc(.18*var(--glass)))),linear-gradient(var(--emerald),var(--emerald2))}
/* first bubble of a run: a squared corner points at the sender, like WhatsApp's tail */
.m.first{margin-top:8px}.m.first:not(.me){border-top-left-radius:3px}.m.first.me{border-top-right-radius:3px}
.n{display:block;font:400 13.5px Alegreya;color:var(--lamp);margin-bottom:1px}
.t{float:right;margin:7px 0 -5px 12px;font:400 12px Alegreya;color:var(--spray);white-space:nowrap}
.m audio{display:block;height:34px;width:240px}
.bar{display:flex;gap:9px;align-items:center;padding:9px 14px;box-shadow:0 -1px 0 rgba(160,200,190,calc(.22*var(--glass) + .08))}
#txt{flex:1;min-width:0;padding:10px 15px;border:1px solid rgba(160,200,190,.22);border-radius:22px;background:var(--abyss);color:var(--foam);font:400 17px Caudex,serif;outline:none;box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}#txt:focus{border-color:var(--rim)}#txt::placeholder{color:var(--spray)}
.who button.on{background:linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.05) 48%,rgba(0,0,0,0) 52%,rgba(0,0,0,.2)),var(--act)}
.bar button{all:unset;cursor:pointer;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.05) 48%,rgba(0,0,0,0) 52%,rgba(0,0,0,.2)),var(--act);color:#eef6f1;box-shadow:inset 0 0 0 1px var(--rim-me),0 2px 6px #000}.bar button:hover{background-color:var(--act2)}
.gate{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(var(--tint),var(--tint)),url(art/dock-wall.webp?v=2) center top/1500px auto,var(--abyss);font:400 16px Alegreya}
.gate img{height:64px;width:auto}.gate b{font:400 26px AlmB,serif;margin-bottom:8px}
.gate input{width:260px;padding:9px 13px;border:1px solid rgba(160,200,190,.25);border-radius:8px;background:var(--abyss);color:var(--foam);font:400 18px Caudex,serif;outline:none;box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}.gate input:focus{border-color:var(--rim)}
.who{display:flex;align-items:center;gap:6px;margin-top:4px;color:var(--spray)}.who button{all:unset;cursor:pointer;padding:3px 11px;border-radius:14px;color:var(--foam);box-shadow:inset 0 0 0 1px var(--rim)}.who button.on{box-shadow:inset 0 0 0 1px var(--rim-me)}
.go{all:unset;cursor:pointer;margin-top:6px;padding:7px 22px;border-radius:20px;font:400 19px AlmB,serif;background:linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.05) 48%,rgba(0,0,0,0) 52%,rgba(0,0,0,.2)),var(--act);box-shadow:inset 0 0 0 1px var(--rim-me),0 2px 6px #000}.go:hover{background-color:var(--act2)}
#gnote{min-height:1.3em;margin:0;color:#e0a39b}
[hidden]{display:none!important}
@media(max-width:700px){.log{padding:10px 10px}.m{max-width:85%}}