@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;600;700;900&display=swap');
:root{color-scheme:dark;--accent:#c5b0ff}*{box-sizing:border-box}body{margin:0;background:#080808;color:#f5f1fa;font-family:'Noto Sans KR',sans-serif;font-size:14px}button,textarea,a{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;background:#28212f;color:#e8dafa;border:1px solid #51415e;padding:9px 13px;border-radius:12px}button:disabled{opacity:.5;cursor:wait}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.primary{background:var(--accent);color:#21152d;border:0;font-weight:700;border-radius:12px;padding:12px 20px}header{height:66px;border-bottom:1px solid #34283e;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 30px;background:#100d15}header a{color:#c7b9d6;font-size:13px}#identity{font-size:11px;color:#a99ab7;max-width:30%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#workspace{display:flex;height:calc(100dvh - 66px);max-width:1400px;margin:auto}aside{width:320px;min-width:270px;border-right:1px solid #34283e;padding:20px;overflow:auto;background:#110e16}aside h2{font-size:19px}#threads{display:grid;gap:10px;margin-top:20px}.thread{width:100%;text-align:left;background:#1b1522;border-color:#33273e;padding:15px}.thread.active{border-color:#b99ce3;background:#2b1e3a}.thread strong{font-size:13px;display:block;overflow:hidden;text-overflow:ellipsis}.thread p{font-size:12px;color:#b9aac7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:7px 0}.thread small{font-size:10px;color:#9c8bac}.unread{float:right;min-width:21px;padding:2px 5px;background:var(--accent);color:#22132e;border-radius:15px;font-size:10px;text-align:center}main{display:flex;flex-direction:column;min-width:0;flex:1;max-width:960px;margin:0 auto;background:#0d0b10}.thread-head{padding:20px 25px;border-bottom:1px solid #302438;display:flex;gap:12px;align-items:center}.thread-head h1{font-size:19px;margin:0 0 5px}.thread-head p{font-size:11px;color:#a99bb6;margin:0;line-height:1.7}.notification-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 25px;background:#18121f}.notification-tools button{font-size:11px;padding:7px 10px}.notification-tools span{font-size:10px;color:#bdaccb}#chat-error{color:#f5baae;font-size:12px;line-height:1.7;padding:0 25px}#chat-error:not(:empty){padding:10px 25px;background:#332022}#messages-wrap{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:22px 25px;min-height:140px;scroll-behavior:auto}#older{display:block;margin:0 auto 20px;font-size:11px}#messages{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px}.msg{display:flex;flex-direction:column;align-items:flex-start;max-width:85%;align-self:flex-start}.msg.mine{align-self:flex-end;align-items:flex-end}.msg>span{font-size:10px;color:#aa97ba;margin-bottom:5px}.msg p{margin:0;background:#251c2e;border:1px solid #44314f;border-radius:4px 16px 16px 16px;padding:12px 15px;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px}.msg.mine p{background:#c5b0ff;color:#24152f;border:0;border-radius:16px 4px 16px 16px}.msg time{font-size:9px;color:#9a87ac;margin-top:5px}#empty{text-align:center;padding:35px 12px;color:#c0b2ce}#empty>span{font-size:38px}#empty h2{font-size:20px;color:#eadff2;margin:15px 0}#empty p{font-size:12px;line-height:2}#empty small{display:block;color:#9c8bac;font-size:10px;margin-top:16px}#composer{padding:16px 25px max(16px,env(safe-area-inset-bottom));border-top:1px solid #34283e;background:#120e17}#composer>label{display:block;font-size:11px;color:#c1b2cf;margin-bottom:7px}.compose-row{display:flex;gap:9px;align-items:stretch}textarea{flex:1;min-width:0;resize:none;max-height:160px;background:#201827;border:1px solid #4f3d5f;color:#fff;padding:12px;border-radius:12px;line-height:1.7;font-size:14px}.compose-note{display:flex;justify-content:space-between;font-size:9px;color:#9f8bad;margin-top:8px}.privacy{font-size:9px!important;line-height:1.7;margin-bottom:0}.muted{color:#a99ab7;font-size:12px}#startup{text-align:center;padding:45px;color:#b9a6cb}#login{margin:70px auto;max-width:520px;text-align:center;padding:30px}#login h1{font-size:27px}#login p{color:#bcaec9;line-height:2;margin-bottom:28px}#login a{display:inline-block}#back-inbox{font-size:11px;white-space:nowrap} [hidden]{display:none!important}@media(max-width:700px){header{height:55px;padding:0 16px;gap:10px}header strong{font-size:13px}header a{font-size:11px}#workspace{height:calc(100dvh - 55px)}main{max-width:100%}aside{width:100%;min-width:0}.admin-workspace main{display:none}.admin-workspace.selected aside{display:none}.admin-workspace.selected main{display:flex}.thread-head{padding:14px 15px}.thread-head h1{font-size:16px}.thread-head p{font-size:10px}.notification-tools{padding:10px 15px}.notification-tools span{font-size:9px}#messages-wrap{padding:18px 15px}#composer{padding:12px 15px max(12px,env(safe-area-inset-bottom))}.msg{max-width:92%}.msg p{font-size:13px;padding:10px 13px}#send{padding:10px 14px}.compose-note>span:first-child{font-size:8px}.privacy{font-size:8px!important}}
/* Device and keyboard-aware chat layout. */
:root{--chat-header-height:66px}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}.chat-page{height:var(--app-viewport-height,100dvh);overflow:hidden;display:flex;flex-direction:column}.chat-page>header{height:var(--chat-header-height);min-height:var(--chat-header-height);flex-shrink:0;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}#workspace{height:auto;min-height:0;width:100%;flex:1;overflow:hidden}#workspace>main{min-height:0;width:100%;overflow:hidden}.thread-head{flex-shrink:0;min-width:0}.thread-head>div{min-width:0}.thread-head h1{overflow-wrap:anywhere;line-height:1.5}.notification-tools{flex-shrink:0;max-height:140px;overflow:auto}.notification-tools button,#back-inbox{min-height:44px;min-width:44px;font-size:12px}.notification-tools span{font-size:12px;line-height:1.7}#chat-error{flex-shrink:0;max-height:80px;overflow:auto}#messages-wrap{min-height:0;overflow-anchor:none;scrollbar-gutter:stable;touch-action:pan-y pinch-zoom}#composer{flex-shrink:0;min-width:0;margin:0}.compose-row textarea{font-size:16px;line-height:1.6;min-height:52px;max-height:min(140px,24dvh);overflow-y:auto}#send{min-width:74px;min-height:48px;align-self:flex-end}#older{min-height:44px;padding:10px 16px;font-size:13px}.msg p{font-size:15px;line-height:1.85;max-width:100%}.msg>span{font-size:12px}.msg time{font-size:11px}.msg{min-width:0;max-width:85%}.thread{min-height:72px;overflow-wrap:anywhere}.thread strong{font-size:15px}.thread p{font-size:13px}.thread small{font-size:11px}.compose-note{font-size:11px;line-height:1.7}.privacy{font-size:10px!important}.chat-page #login{overflow-y:auto;max-width:560px;margin:auto;padding:30px 20px}.chat-page #login a{min-height:48px}.chat-page #startup{overflow-y:auto}
@media(min-width:901px) and (max-width:1200px){aside{width:280px;min-width:250px}.thread-head{padding:16px 20px}.notification-tools{padding:10px 20px}#messages-wrap{padding:20px}#composer{padding:14px 20px max(14px,env(safe-area-inset-bottom))}}
@media(max-width:900px){.admin-workspace main{display:none}.admin-workspace aside{width:100%;min-width:0;border-right:0}.admin-workspace.selected aside{display:none}.admin-workspace.selected main{display:flex}.thread-head{padding:14px 18px}.notification-tools{padding:10px 18px}#messages-wrap{padding:18px}#composer{padding:14px 18px max(14px,env(safe-area-inset-bottom))}.thread-head h1{font-size:18px}.thread-head p{font-size:12px}.compose-note>span:first-child{font-size:11px}.notification-tools span{font-size:12px}}
@media(max-width:600px){:root{--chat-header-height:60px}.chat-page>header{gap:8px;padding-inline:14px}.chat-page>header a{font-size:12px;min-height:44px;display:flex;align-items:center;white-space:nowrap}.chat-page>header strong{font-size:14px;white-space:nowrap}#identity{font-size:11px;max-width:25%}.thread-head{padding:12px 14px;gap:9px}.thread-head h1{font-size:17px}.thread-head p{font-size:11px}.notification-tools{padding:8px 14px;gap:7px;max-height:125px}.notification-tools span{font-size:11px;width:100%}#messages-wrap{padding:16px 14px}#composer{padding:12px 14px max(12px,env(safe-area-inset-bottom))}#composer>label{font-size:12px}.compose-row{gap:8px}.compose-row textarea{padding:10px;min-height:48px}#send{min-width:64px;padding:12px;font-size:14px}.msg{max-width:94%}.msg p{font-size:14px;padding:11px 13px}.msg time{font-size:10px}.compose-note{font-size:10px}.compose-note>span:first-child{font-size:10px}.privacy{font-size:10px!important;line-height:1.6}#chat-error:not(:empty){padding:8px 14px}.chat-page #login h1{font-size:25px}.thread-subtitle{overflow-wrap:anywhere}}
@media(max-height:550px){.thread-head{padding-block:6px}.thread-head p{display:none}.notification-tools{padding-block:5px;max-height:54px}.notification-tools span{display:none}.notification-tools button{min-height:36px;padding:5px 10px}.privacy{display:none}.compose-note{margin-top:4px}#composer{padding-top:7px;padding-bottom:max(7px,env(safe-area-inset-bottom))}#composer>label{display:none}.compose-row textarea{min-height:44px;max-height:90px}#send{min-height:44px}#messages-wrap{padding-block:10px}}
/* Visual viewport may shrink with the keyboard while CSS media height stays unchanged. */
.compact-viewport .chat-page .thread-head{padding-block:6px}.compact-viewport .chat-page .thread-head p{display:none}.compact-viewport .chat-page .notification-tools{padding-block:5px;max-height:54px}.compact-viewport .chat-page .notification-tools span,.compact-viewport .chat-page .privacy{display:none}.compact-viewport .chat-page .notification-tools button{min-height:36px;padding:5px 10px}.compact-viewport .chat-page #composer{padding-top:7px;padding-bottom:max(7px,env(safe-area-inset-bottom))}.compact-viewport .chat-page #composer>label{display:none}.compact-viewport .chat-page .compose-row textarea{min-height:44px;max-height:90px}.compact-viewport .chat-page #send{min-height:44px}.compact-viewport .chat-page #messages-wrap{padding-block:10px}

/* Keep notification controls visible outside the mobile inbox/thread switch. */
.chat-page > .notification-tools{width:100%;max-width:1400px;margin:0 auto;border-bottom:1px solid #302438}

#nickname-form{display:grid;gap:12px;text-align:left}#nickname{width:100%;font:inherit;font-size:16px;padding:14px;border:1px solid #756386;border-radius:12px;background:#18121f;color:#fff}#nickname-error{color:#ffbeb0;margin:0}#login .session-note{font-size:12px;line-height:1.8;margin:20px 0}#login .admin-signin{font-size:13px;text-decoration:underline}.chat-page>header{gap:10px}.chat-page>header .admin-signin{font-size:11px;white-space:nowrap}