/* ===== chat: 모눈종이 ===== */
.chat{display:flex;flex-direction:column;min-height:0;min-width:0;
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:22px 22px}
.head{display:flex;align-items:center;gap:8px;padding:12px 20px 10px;background:var(--paper);border-bottom:1px solid var(--line)}
.menu{display:none;background:none;border:0;padding:6px;margin-left:-6px;border-radius:8px}
.menu svg{display:block}
.title{font-family:"Jua",sans-serif;font-size:24px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbtn{background:var(--memo);border:1px solid var(--line);border-radius:10px;padding:5px 10px;font-size:12px;white-space:nowrap}
.hbtn.panic{background:var(--red);color:#fff;border-color:var(--red);font-family:"Jua",sans-serif;font-size:12px}
.hbtn kbd{font:inherit;font-size:12px;color:var(--muted);margin-left:4px}

.clock{padding:8px 20px 10px;background:var(--paper);border-bottom:1px solid var(--line);cursor:pointer}
.clock-top{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted)}
.clock-top b{font-family:"Jua",sans-serif;font-weight:400;font-size:12px;color:var(--ink)}
.track{margin-top:5px;height:10px;border-radius:999px;background:var(--bar-bg);overflow:hidden;border:1px solid var(--line)}
.fill{height:100%;width:0;background:repeating-linear-gradient(-45deg,var(--bar) 0 8px,color-mix(in srgb,var(--bar) 78%,#fff) 8px 16px);border-radius:999px;transition:width .6s ease}

.msgs{flex:1;overflow-y:auto;padding:16px 20px 8px;display:flex;flex-direction:column}
.empty{margin:auto;text-align:center;color:var(--muted);max-width:30ch}
.empty .big{font-family:"Jua",sans-serif;font-size:24px;color:var(--ink);display:block;margin-bottom:4px}
.day{align-self:center;font-family:"Jua",sans-serif;font-size:12px;color:var(--muted);background:var(--paper);border:1px dashed var(--line);border-radius:999px;padding:2px 14px;margin:14px 0 8px}
.grp{display:flex;gap:10px;margin-top:12px}
.grp > img{width:34px;height:34px;border-radius:50%;flex:none;margin-top:2px}
.col{display:flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:min(78%,560px)}
.who{font-size:12px;font-weight:500;color:var(--muted);margin:0 0 3px 4px}
.grp.me{justify-content:flex-end}
.grp.me .col{align-items:flex-end}
.msg{display:flex;flex-direction:column;align-items:inherit;margin-top:4px;max-width:100%}
.row{display:flex;align-items:flex-end;gap:6px;max-width:100%}
.grp.me .row{flex-direction:row-reverse}
.bub{padding:8px 13px;background:var(--memo);border:1px solid var(--line);border-radius:4px 16px 16px 16px;white-space:pre-wrap;overflow-wrap:anywhere;min-width:0;cursor:pointer;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.grp.me .bub{background:var(--postit);color:var(--postit-ink);border-color:transparent;border-radius:16px 4px 16px 16px}
.bub a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.time{font-size:12px;color:var(--muted);white-space:nowrap;flex:none}
.pending .bub{opacity:.65}

.stamps{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.stamp{font-family:"Jua",sans-serif;font-size:12px;line-height:1;background:transparent;border:2px solid currentColor;border-radius:999px;padding:4px 9px 3px;transform:rotate(-6deg);opacity:.9}
.stamp .n{font-family:"IBM Plex Sans KR",sans-serif;font-size:12px;font-weight:600;margin-left:4px}
.stamp.mine{opacity:1;box-shadow:inset 0 0 0 1px currentColor}
.s-ok{color:var(--red)} .s-no{color:var(--blue)} .s-lol{color:var(--ochre)} .s-agree{color:var(--green)} .s-coffee{color:var(--brown)}
.acts{display:none;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;padding:6px 8px;background:var(--memo);border:1px solid var(--line);border-radius:12px}
.msg.act .acts{display:flex}
.acts .stamp{transform:none;cursor:pointer}
.acts .stamp:hover{transform:rotate(-8deg) scale(1.06)}
.del{font-size:12px;background:none;border:1px solid var(--line);border-radius:8px;padding:3px 9px;color:var(--muted)}
.del.sure{color:var(--red);border-color:var(--red)}
@keyframes thunk{0%{transform:rotate(-6deg) scale(1.9);opacity:0}60%{transform:rotate(-6deg) scale(.92);opacity:1}100%{transform:rotate(-6deg) scale(1)}}
.stamp.fresh{animation:thunk .32s ease-out}

.typing{min-height:22px;padding:0 22px;font-size:12px;color:var(--muted)}
.compose{display:flex;gap:8px;align-items:flex-end;padding:6px 16px 14px}
.sigh,.rlbtn{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--memo);font-size:24px}
.compose textarea{flex:1;resize:none;border:1px solid var(--line);background:var(--memo);border-radius:20px;padding:10px 16px;max-height:160px;line-height:1.45;min-height:44px}
.compose textarea:focus{outline:none;border-color:var(--ink)}
.send{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--ink);color:var(--paper);display:grid;place-items:center}
.send:disabled,.sigh:disabled,.rlbtn:disabled{opacity:.4;cursor:default}
.note{padding:0 20px 12px;font-size:12px;color:var(--muted)}

.puff{position:fixed;bottom:110px;z-index:40;pointer-events:none;font-family:"Jua",sans-serif;font-size:12px;color:var(--ink);background:var(--memo);border:1px solid var(--line);border-radius:999px;padding:6px 14px;white-space:nowrap;animation:rise 3.2s ease-out forwards}
.smoke{position:fixed;bottom:118px;z-index:39;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--muted) 45%,transparent);filter:blur(4px);pointer-events:none;opacity:0;animation:smoke 3.4s ease-out forwards}
@keyframes smoke{0%{transform:translate(0,0) scale(.4);opacity:0}15%{opacity:.8}100%{transform:translate(var(--dx),-300px) scale(2.8);opacity:0}}
@keyframes rise{0%{transform:translateY(0) scale(.8);opacity:0}12%{opacity:1;transform:translateY(-20px) scale(1)}100%{transform:translateY(-260px) translateX(30px) scale(1.1);opacity:0}}

.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:9px 16px;border-radius:12px;font-size:12px;max-width:90vw;display:none;z-index:60}
.toast.on{display:block}
.scrim{display:none}

.panel{position:fixed;top:calc(64px + env(safe-area-inset-top,0px));right:16px;z-index:50;width:min(320px,calc(100vw - 32px));background:var(--memo);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 12px 30px rgba(0,0,0,.18)}
.panel h2{font-family:"Jua",sans-serif;font-weight:400;font-size:24px;margin:0 0 10px}
.panel label{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:10px 0;font-size:12px}
.panel input,.panel select{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:5px 8px}
.panel p{font-size:12px;color:var(--muted);margin:12px 0 0}
.panel .close{margin-top:12px;width:100%;background:var(--ink);color:var(--paper);border:0;border-radius:10px;padding:8px}
/* 다른 기기 연결 코드 (Supabase 모드에서만 보임) */
.panel .linkbox{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
.panel .linkbox button{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:7px;font-size:12px;cursor:pointer}
.panel .linkbox button:disabled{opacity:.6;cursor:default}
.panel .linkout{margin:8px 0 0;font-size:12px;color:var(--ink)}
.panel .linkout b{display:block;font-family:ui-monospace,Consolas,monospace;font-size:20px;letter-spacing:.08em;margin:4px 0;user-select:all}