/* PirikaTalk UI system: 4/8/12/16/24 spacing; 12/14/16/20 type; 44px controls. */
:root,[data-theme=classic]{color-scheme:dark;--bg:#0f172a;--bg-secondary:#1e293b;--bg-tertiary:#334155;--text:#f1f5f9;--text-muted:#b0bed0;--border:#42516a;--primary:#5b5ee4;--primary-hover:#7376f5;--accent-text:#c7d2fe;--own-text:#fff;--danger:#f87171;--shadow:0 16px 48px #0003}
[data-theme=dark]{color-scheme:dark;--bg:#111115;--bg-secondary:#1c1c23;--bg-tertiary:#292932;--text:#f4f4f7;--text-muted:#b7b7c6;--border:#3b3b49;--primary:#6255ce;--primary-hover:#7365df;--accent-text:#d2caff;--own-text:#fff;--danger:#ff8a9b;--shadow:0 16px 48px #0005}
[data-theme=light]{color-scheme:light;--bg:#f4f5fa;--bg-secondary:#fff;--bg-tertiary:#e9edf5;--text:#182238;--text-muted:#526078;--border:#d3dbe7;--primary:#e0e4ff;--primary-hover:#d1d7ff;--accent-text:#4f46b5;--own-text:#182238;--danger:#b4233c;--shadow:0 16px 48px #24324b1a}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic','Apple SD Gothic Neo','Noto Sans KR',sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}button,a,input,textarea{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px}button:disabled{cursor:default}a{color:var(--accent-text)}
.login-container{max-width:480px;padding:32px 24px;text-align:left}.appearance-trigger{display:block;margin-left:auto;margin-bottom:32px;background:var(--bg-secondary);color:var(--text);border:1px solid var(--border);border-radius:12px;min-height:44px;padding:8px 14px;font-size:14px}.login-brandmark,.brand-mark{display:grid;place-items:center;background:var(--primary);color:var(--own-text);font-weight:800;border-radius:14px}.login-brandmark{width:56px;height:56px;font-size:30px;margin-bottom:20px}.app-title{background:none;-webkit-text-fill-color:var(--text);color:var(--text);font-size:36px;letter-spacing:-1px;font-weight:750}.app-subtitle{font-size:16px;margin:8px 0 32px;color:var(--text-muted)}.field-label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}.color-picker label{font-size:14px}.color-hint,.app-download-card small{font-size:12px;line-height:1.6}.color-picker{margin:24px 0}#loginForm input[type=text]{border-width:1px;min-height:52px;background:var(--bg-secondary)}.btn-primary,.app-download-button{min-height:48px;background:var(--primary);color:var(--own-text);border-radius:12px;font-size:16px}.app-download-card{margin-top:32px;padding:20px;border-radius:16px}.app-download-card h2{font-size:16px}.login-container>p:last-child{font-size:13px;text-align:center;margin-top:20px}
.sidebar{width:244px;min-width:244px;background:var(--bg-secondary)}.sidebar-brand{display:flex;align-items:center;gap:12px;padding:24px 20px;font-size:17px;font-weight:700}.brand-mark{width:40px;height:40px;font-size:24px;flex-shrink:0}.sidebar-brand small{display:block;font-weight:400;color:var(--text-muted);font-size:12px;margin-top:2px}.sidebar-header{padding:16px 20px;border-top:1px solid var(--border)}.sidebar-header h2{font-size:14px;font-weight:600}.sidebar-header h2 span{color:var(--accent-text);margin-left:6px}.online-list{padding:12px 20px}.online-list li{padding:10px 0;font-size:14px}.sidebar-links{padding:20px}.sidebar-links h4{font-size:12px}.sidebar-links a{font-size:14px;min-height:36px;display:flex;align-items:center}.sidebar-app-install{margin-top:20px;padding-top:20px}
.chat-main{background:var(--bg);min-height:0}.chat-header{min-height:72px;flex:none;gap:8px;padding:12px 24px;background:var(--bg-secondary)}.room-heading{flex:1;min-width:0}.room-heading h3{font-size:20px;letter-spacing:-.4px;font-weight:700}.room-heading .member-count{display:block;margin:2px 0 0;font-size:12px;color:var(--text-muted)}.header-action{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;gap:8px;min-width:44px;min-height:44px;border-radius:12px;background:var(--bg-tertiary);color:var(--text);border:1px solid transparent;padding:8px 12px;font-size:14px;font-weight:600}.header-action svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.header-action:hover{border-color:var(--border)}
.messages{gap:8px;padding:24px max(24px,calc((100% - 1040px)/2));scrollbar-color:var(--border) transparent}.msg{padding:12px 16px;border-radius:16px;max-width:min(78%,720px);animation:none;flex-shrink:0}.msg.own{background:var(--primary);color:var(--own-text)}.msg.other{background:var(--bg-secondary);border:1px solid var(--border)}.msg-text{font-size:16px;line-height:1.6;overflow-wrap:anywhere}.msg-username{font-size:12px;margin-bottom:6px;font-weight:600}.msg-time{font-size:12px;margin-top:6px;color:var(--text-muted)}.msg.own .msg-time,.msg.own .msg-username{color:var(--own-text)!important;opacity:.8}.date-divider{font-size:12px;margin:16px 0}.load-more-btn{min-height:40px;font-size:13px;padding:8px 16px}.msg-text pre{font-size:14px;line-height:1.6;max-width:100%;overflow:auto}.msg-text code{font-size:.9em}.file-name{font-size:15px}.file-size{font-size:12px}
.message-form{padding:16px max(24px,calc((100% - 1040px)/2));gap:10px;align-items:flex-end;background:var(--bg-secondary);border-top:1px solid var(--border)}.message-form textarea{font-size:16px;line-height:1.5;min-height:48px;padding:11px 14px;border:1px solid var(--border);border-radius:14px;background:var(--bg);color:var(--text)}.btn-send{min-height:48px;padding:10px 20px;border-radius:14px;font-size:15px;color:var(--own-text)}.tools-toggle-btn{width:44px;height:44px;min-width:44px;border-radius:50%;font-size:26px;background:var(--bg);color:var(--text);border-color:var(--border)}.tools-panel{border:1px solid var(--border);border-radius:16px;padding:12px;gap:8px;box-shadow:var(--shadow);background:var(--bg-secondary);max-height:60dvh;overflow:auto}.tools-panel-item{min-height:72px;gap:8px;border-radius:12px;font-size:13px;color:var(--text)}.tools-panel-item:hover{background:var(--bg-tertiary)}.tools-panel-icon{font-size:24px}.typing-indicator{font-size:12px;padding-inline:24px}
dialog{color:var(--text);background:var(--bg-secondary);border:1px solid var(--border);box-shadow:var(--shadow);padding:0}dialog::backdrop{background:#03071288}dialog:not([open]){display:none}.room-menu{inset:0 0 0 auto;margin:0;width:min(400px,92vw);max-width:none;height:100dvh;max-height:100dvh;border-radius:20px 0 0 20px}.room-menu[open]{display:flex;flex-direction:column}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;border-bottom:1px solid var(--border);flex-shrink:0}.panel-heading h2{font-size:20px;line-height:1.4}.panel-heading button{min-height:44px;padding:8px 12px;border-radius:10px;background:var(--bg-tertiary);color:var(--text);border:0;font-size:14px}.room-menu-body{padding:12px;overflow-y:auto;min-height:0}.room-menu-body h3{font-size:12px;letter-spacing:.5px;color:var(--text-muted);padding:16px 12px 8px}.room-menu .menu-row{width:100%;display:flex;align-items:center;gap:12px;padding:12px;min-height:64px;text-align:left;background:transparent;color:var(--text);border:0;border-radius:12px;font-size:16px;font-weight:600}.menu-row:hover{background:var(--bg-tertiary)!important}.menu-row small{display:block;color:var(--text-muted);font-size:12px;line-height:1.5;margin-top:3px;font-weight:400}.menu-symbol{width:28px;flex-shrink:0;text-align:center;font-size:24px;color:var(--accent-text)}.menu-chevron{margin-left:auto;font-size:24px;color:var(--text-muted)}.menu-danger,.menu-danger .menu-symbol{color:var(--danger)!important}
.appearance-dialog{margin:auto;width:min(520px,calc(100vw - 32px));max-height:90dvh;border-radius:20px}.appearance-body{padding:24px}.appearance-body h3{font-size:16px;margin-bottom:8px}.appearance-body p{font-size:14px;color:var(--text-muted);line-height:1.6;margin-bottom:20px}.theme-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0 28px}.theme-options button{min-width:0;position:relative;padding:8px 8px 12px;border:2px solid var(--border);border-radius:14px;background:var(--bg);color:var(--text);font-size:14px}.theme-options button[aria-checked=true]{border-color:var(--accent-text)}.theme-check{display:none}.theme-options button[aria-checked=true] .theme-check{display:inline;margin-left:4px;color:var(--accent-text)}.theme-swatch{display:flex;flex-direction:column;gap:8px;justify-content:center;height:68px;border-radius:8px;padding:12px;margin-bottom:10px}.theme-swatch i{height:10px;width:68%;border-radius:4px}.theme-swatch i:last-child{align-self:flex-end;width:50%}.swatch-classic{background:#0f172a}.swatch-classic i{background:#334155}.swatch-classic i:last-child{background:#6366f1}.swatch-dark{background:#111115}.swatch-dark i{background:#292932}.swatch-dark i:last-child{background:#6255ce}.swatch-light{background:#f4f5fa;border:1px solid #d3dbe7}.swatch-light i{background:#d3dbe7}.swatch-light i:last-child{background:#b7b9f4}.appearance-preview{padding:16px;border-radius:16px;background:var(--primary);color:var(--own-text)}.appearance-preview span,.appearance-preview small{font-size:12px}.appearance-preview p{font-size:16px;margin:8px 0;color:inherit}.appearance-preview small{display:block;text-align:right}#appearanceStatus{margin:12px 0 0;color:var(--danger)}
.star-panel,.archive-panel,.help-modal-content,.music-modal-content,.gif-modal-content,.roulette-modal-content,.dccon-dl-modal-content,.dccon-list-modal-content,.sticker-preview-dialog{background:var(--bg-secondary);color:var(--text);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow)}.archive-heading h2,.star-panel h2,.help-modal-header h3,.dccon-list-modal-header h3{font-size:20px}.archive-panel button,.star-panel button{min-height:44px;font-size:14px}.archive-status,.archive-card small,.archive-original,.star-source,.star-domain,.star-kind{font-size:12px}.archive-card p,.star-card-description{font-size:14px;line-height:1.6}.archive-panel,.star-panel{padding:24px}.archive-grid{gap:16px}.archive-card{padding:16px}.archive-grid .archive-card{padding:12px}.archive-tabs{gap:8px}.archive-card,.star-panel .star-result{background:var(--bg);border-color:var(--border)}.archive-panel button[aria-pressed=true],.star-panel .star-primary,.star-panel .star-tabs button[aria-pressed=true]{background:var(--primary);color:var(--own-text);border-color:var(--accent-text)}.star-shared,.star-shared-heading,.star-shared-action{color:var(--text)}.help-table{font-size:14px}.help-modal-body{line-height:1.65}.help-table td{padding:12px}.help-note{font-size:13px}.music-desc,.music-hint,.roulette-label{font-size:14px;line-height:1.6}.sticker-preview-header button,.music-close,.gif-close,.roulette-close,.help-modal-close,.dccon-list-modal-close{min-width:44px;min-height:44px}.emoji-picker,.dccon-picker{border-color:var(--border);box-shadow:var(--shadow)}
[data-theme=light] .msg.other .msg-username,[data-theme=light] .online-name{color:var(--accent-text)!important}[data-theme=light] .msg.own .music-share-caption{color:var(--own-text)}[data-theme=light] .msg.bot,[data-theme=light] .msg.evil{background:var(--bg-secondary);color:var(--text)}
@media(min-width:769px){.sidebar.open{box-shadow:inset -3px 0 var(--accent-text)}.chat-header{padding-inline:32px}}
@media(max-width:768px){.chat-header{min-height:64px;padding:8px 16px}.room-heading h3{font-size:18px}.header-action-label{display:none}.header-action{padding:8px}.messages{padding:16px;gap:8px}.msg{max-width:88%;padding:10px 12px}.message-form{padding:12px 12px max(12px,env(safe-area-inset-bottom));gap:8px}.btn-send{padding:10px 16px}.sidebar{width:min(300px,88vw);min-width:0}.sidebar-brand{padding:20px}.archive-panel,.star-panel{padding:16px}.archive-grid{gap:10px}.tools-panel{max-width:calc(100vw - 24px)}.theme-options{gap:8px}.panel-heading{padding:16px}.appearance-body{padding:16px}.appearance-dialog{max-height:92dvh}.login-container{padding:24px}.msg-text{font-size:16px}.msg-time{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
/* Keep the explicitly requested tools-toggle state transition in both motion modes. */
#toolsToggleBtn{padding:0;transform:none;transition:background-color .2s ease}
#toolsToggleBtn .tools-toggle-icon{display:block;width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;transform-box:view-box;transform-origin:50% 50%;transform:rotate(0deg);transition:transform .24s cubic-bezier(.4,0,.2,1);pointer-events:none}
#toolsToggleBtn.active{transform:none}
#toolsToggleBtn.active .tools-toggle-icon{transform:rotate(45deg)}
@media(prefers-reduced-motion:reduce){#toolsToggleBtn .tools-toggle-icon{transition:transform .24s cubic-bezier(.4,0,.2,1)!important}}
.msg .msg-time,.msg.own .msg-time,.msg.own .msg-username{opacity:1}.sidebar-links a{color:var(--accent-text)}#toolsToggleBtn{background:var(--bg-tertiary);color:var(--text)}.star-panel button:hover:not(:disabled){background:var(--bg-tertiary);color:var(--text)}.star-panel .star-primary:hover:not(:disabled){background:var(--primary-hover);color:var(--own-text)}.bot-preview-action,.bot-preview-count,.md-preview-label{font-size:12px}.bot-preview-body{font-size:14px}
@media(max-width:768px){.sidebar:not(.open){box-shadow:none}}
input::placeholder,textarea::placeholder{color:var(--text-muted);opacity:1}.update-banner,.notify-tutorial{background:var(--bg-tertiary);color:var(--text);border-bottom:1px solid var(--border);font-size:14px}.update-banner-close,.notify-tutorial-close{color:var(--text)}[data-theme=light]{--success:#15803d}