:root{--white:#fff;--paper:#f7f7f7;--ink:#111;--muted:#6b6b6b;--line:#e5e5e5;--radius:16px;--shadow:0 12px 40px #11111108;--app-height:100dvh;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}html,body{margin:0;min-width:0;width:100%;min-height:100%;background:var(--white)}body{font-size:14px;line-height:1.5}body.logged-in{overflow:hidden}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer;border:0;background:none;color:inherit;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;line-height:1.3}button:disabled{cursor:not-allowed;opacity:.5}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid #6b6b6b;outline-offset:4px}button,input,select,textarea{border-radius:12px}input,select,textarea{width:100%;max-width:100%;border:1px solid var(--line);background:var(--white);color:var(--ink);padding:13px 15px;transition:border-color .15s}input::placeholder,textarea::placeholder{color:#767676}input:focus,textarea:focus,select:focus{border-color:var(--ink)}textarea{resize:vertical}select{appearance:auto}label{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:600}h1,h2,h3,p{margin:0}h1,h2,h3{letter-spacing:-.04em;line-height:1.2}h1{font-size:26px}h2{font-size:28px}h3{font-size:18px}p{line-height:1.65}small{font-size:12px}svg{width:20px;height:20px;flex:none;display:block}[data-icon]{display:inline-flex;align-items:center;justify-content:center;flex:none}[hidden]{display:none!important}.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0;margin:-1px}.muted{color:var(--muted)}.small{font-size:13px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}.primary,.secondary,.button{padding:13px 18px;min-height:44px;border-radius:12px;font-weight:650;display:inline-flex;align-items:center;justify-content:center;gap:9px}.primary{background:var(--ink);color:white;border:1px solid var(--ink)}.primary:hover:not(:disabled){background:#333}.secondary{background:var(--white);color:var(--ink);border:1px solid var(--line)}.secondary:hover:not(:disabled){background:var(--paper);border-color:#bbb}.text-button{padding:8px 2px;font-size:12px;color:var(--muted)}.text-button:hover{color:var(--ink)}.icon-button{width:40px;min-width:40px;height:40px;border-radius:12px;color:var(--muted)}.icon-button:hover{background:var(--paper);color:var(--ink)}.bordered{border:1px solid var(--line)}.full{width:100%}.stack{display:flex;flex-direction:column;gap:18px}.stack h3{margin-top:4px}.field-help{color:var(--muted);font-size:11px;line-height:1.65;font-weight:400}.stack>.field-help{margin-top:-7px}.form-error{font-size:13px;background:var(--paper);border-left:3px solid var(--ink);padding:11px 13px;border-radius:4px;overflow-wrap:anywhere}.notice{border:1px solid var(--line);background:var(--paper);font-size:13px;padding:14px;border-radius:12px;margin:14px 0}.brand{display:flex;align-items:center;gap:10px;color:white;font-size:24px;font-weight:750;letter-spacing:-1px}.brand:hover{text-decoration:none}.brand img{flex-shrink:0}.brand-dot{color:#a8a8a8}.brand.ink{color:var(--ink)}.brand.ink .brand-dot{color:var(--ink)}.brand img{border:1px solid #ffffff24;border-radius:11px}.auth-screen{display:grid;grid-template-columns:minmax(380px,44%) minmax(0,1fr);min-height:100dvh}.auth-story{background:var(--ink);color:white;padding:44px 54px;display:flex;flex-direction:column;overflow:hidden;position:relative}.story-copy{margin:auto 0;padding:64px 0 20px;position:relative;z-index:1}.story-copy .eyebrow{color:#a7a7a7}.story-copy h1{font-size:clamp(36px,4vw,58px);font-weight:600;line-height:1.12;margin:22px 0;letter-spacing:-.055em}.story-copy>p{color:#b3b3b3;font-size:17px;line-height:1.7}.story-art{position:relative;height:190px;width:260px;margin-top:32px}.art-bubble{position:absolute;width:154px;height:103px;border:1px solid #494949;border-radius:24px}.art-back{left:16px;top:5px;transform:rotate(-8deg);background:#151515}.art-front{left:80px;top:57px;transform:rotate(6deg);background:#1c1c1c;display:flex;justify-content:center;align-items:center;gap:13px}.art-front::after{content:"";position:absolute;bottom:-8px;right:23px;width:16px;height:16px;border-right:1px solid #494949;border-bottom:1px solid #494949;background:#1c1c1c;transform:skewY(30deg)}.art-front i{width:8px;height:8px;background:#d6d6d6;border-radius:50%}.art-star{position:absolute;right:-20px;top:14px;font-size:36px;font-weight:200;color:#a6a6a6}.story-footer{display:flex;gap:14px;align-items:center;padding-top:20px;color:#b3b3b3;font-size:11px}.story-footer svg{width:27px;height:27px}.auth-main{padding:48px clamp(32px,8vw,130px) 26px;display:flex;flex-direction:column;min-height:100dvh}.auth-card{width:100%;max-width:420px;margin:auto; padding:40px 0}.auth-card h2{font-size:34px;letter-spacing:-.05em;margin:15px 0}.auth-description{font-size:14px;color:var(--muted);margin-bottom:32px}.auth-submit{width:100%;justify-content:space-between;margin-top:4px}.auth-security{display:flex;gap:7px;align-items:center;justify-content:center;margin-top:22px;color:var(--muted);font-size:11px}.auth-security svg{width:14px;height:14px}.auth-bottom{display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:11px;padding-top:30px}.code-input{letter-spacing:.07em;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase}.mobile-brand{display:none}.auth-card .form-error{margin-bottom:18px}#bootstrapRetry{margin-top:12px}.app-shell{height:var(--app-height,100dvh);width:100%;display:flex;overflow:hidden}.sidebar{width:216px;min-width:216px;background:var(--ink);color:white;display:flex;flex-direction:column;padding:30px 18px 18px}.sidebar>.brand{font-size:22px;padding:0 8px}.sidebar-label{font-size:9px;letter-spacing:.16em;color:#a5a5a5;margin:43px 16px 13px}.sidebar nav{display:flex;flex-direction:column;gap:8px}.nav-button{color:#b8b8b8;justify-content:flex-start;width:100%;font-size:12px;padding:13px 15px;border-radius:11px;font-weight:500;gap:12px;min-height:44px}.nav-button.active{background:#fff;color:var(--ink);font-weight:650}.nav-button:not(.active):hover{background:#282828;color:white}.nav-badge{margin-left:auto;min-width:18px;font-size:10px;border-radius:6px;background:var(--paper);color:var(--ink);padding:2px 5px}.active .nav-badge{background:var(--ink);color:white}.sidebar-tip{margin: auto 8px 30px;padding:20px 12px;background:#1c1c1c;border:1px solid #2e2e2e;border-radius:14px}.sidebar-tip>p{font-size:12px;font-weight:600;margin:10px 0 5px}.sidebar-tip small{color:#b3b3b3;font-size:10px;line-height:1.8;display:block}.sidebar-tip>span{color:#e5e5e5}.sidebar-profile{display:flex;gap:10px;align-items:center;padding:16px 6px;border-top:1px solid #333}.avatar{width:40px;height:40px;border-radius:13px;background:#f0f0f0;color:var(--ink);font-weight:650;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;border:1px solid #e8e8e8}.avatar.inverse{color:white;background:#292929;border-color:#444}.profile-copy{display:flex;flex-direction:column;min-width:0}.profile-copy strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-copy span{font-size:10px;color:#a5a5a5}.logout{font-size:11px;padding:9px 13px}.workspace{display:flex;flex-direction:column;min-width:0;flex:1;min-height:0}.workspace-header{height:83px;min-height:83px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 32px;gap:16px;background:var(--white)}.page-heading .eyebrow{font-size:8px;letter-spacing:.15em}.page-heading h1{font-size:19px;margin-top:4px;letter-spacing:-.03em;font-weight:650}.header-right{margin-left:auto;display:flex;align-items:center;gap:14px}.connection{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:7px;white-space:nowrap}.connection i{width:6px;height:6px;background:#555;border-radius:50%}.connection.problem i{background:transparent;border:1px solid #555}.page-view{flex:1;min-height:0;min-width:0}.dashboard-view,.settings-view{overflow:auto;padding:34px;background:#fafafa}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}.section-heading .eyebrow{font-size:9px}.section-heading h2{font-size:28px;margin:11px 0 8px;font-weight:600}.section-heading p{color:var(--muted);font-size:12px}.section-heading .primary{font-size:12px;white-space:nowrap}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.stat-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);padding:20px;box-shadow:var(--shadow)}.stat-card>span{font-size:11px;color:var(--muted)}.stat-card>div{display:flex;align-items:center;justify-content:space-between;margin:13px 0 12px}.stat-card strong{font-size:36px;font-weight:550;letter-spacing:-.06em}.stat-card svg{width:23px;height:23px;color:#777}.stat-card small{font-size:10px;color:var(--muted)}.dark-stat{background:var(--ink);border-color:var(--ink);color:white}.dark-stat>span,.dark-stat small,.dark-stat svg{color:#c5c5c5}.dashboard-panel{margin-top:26px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}.panel-heading{padding:24px 26px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:16px}.panel-heading h3{font-size:16px}.panel-heading p{font-size:11px;color:var(--muted);margin-top:4px}.recent-room{display:flex;gap:14px;align-items:center;width:100%;padding:18px 26px;text-align:left;border-radius:0;border-bottom:1px solid #f1f1f1}.recent-room:last-child{border-bottom:0}.recent-room:hover{background:var(--paper)}.recent-room .preview{flex:1;min-width:0}.recent-room strong{display:block;font-size:12px;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recent-room p{font-size:11px;color:var(--muted);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recent-room time{color:var(--muted);font-size:10px;font-weight:400}.dashboard-note{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted);margin-top:22px}.dashboard-note svg{width:16px;height:16px}.room-view{display:grid;grid-template-columns:318px minmax(0,1fr)}.rooms-panel{min-width:0;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:var(--white)}.rooms-panel-top{padding:24px 20px 15px}.row-between{display:flex;justify-content:space-between;align-items:center;gap:10px}.row-between h2{font-size:17px;font-weight:650;letter-spacing:-.025em;display:flex;gap:8px;align-items:center}.count-pill{padding:3px 6px;border:1px solid var(--line);border-radius:6px;font-size:9px;color:var(--muted);font-weight:500;min-width:20px;text-align:center;letter-spacing:0}.search-box{margin:22px 0 13px;position:relative;display:block}.search-box>span[data-icon]{position:absolute;top:13px;left:12px;color:var(--muted)}.search-box svg{width:16px;height:16px}.search-box input{font-size:11px;padding:12px 10px 12px 36px;background:var(--paper);border:1px solid #eee;border-radius:10px;height:42px}.filter-label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;font-size:10px;font-weight:400;color:var(--muted)}.filter-label select{font-size:10px;border:0;background:transparent;padding:5px;width:auto;font-weight:500}.room-list{overflow:auto;flex:1;min-height:0;padding:0 10px}.room-item{display:flex;align-items:flex-start;gap:11px;padding:15px 10px;width:100%;text-align:left;border:1px solid transparent;border-radius:12px;margin:2px 0;font-weight:400;position:relative}.room-item:hover{background:#fafafa}.room-item.selected{background:var(--paper);border-color:var(--line)}.room-item .avatar{width:37px;height:37px;font-size:11px;border-radius:11px;margin-top:2px;background:#f4f4f4}.room-item.selected .avatar{background:var(--ink);color:white;border-color:var(--ink)}.room-item-content{flex:1;min-width:0}.room-title-line{display:flex;align-items:center;gap:6px;justify-content:space-between}.room-title-line strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650}.room-title-line time{font-size:9px;flex-shrink:0;color:var(--muted)}.room-guest{font-size:10px;color:var(--muted);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-preview-line{display:flex;align-items:center;gap:5px;margin-top:7px}.room-preview-line p{font-size:10px;color:var(--muted);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5}.unread-badge{background:var(--ink);color:white;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;border-radius:6px;padding:2px 5px;flex-shrink:0}.room-pagination{height:54px;min-height:54px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 15px;color:var(--muted);font-size:10px}.conversation{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--white);position:relative}.chat-content{display:flex;flex-direction:column;height:100%;min-height:0}.chat-header{min-height:81px;padding:16px 25px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}.chat-heading{min-width:0;flex:1}.chat-heading h2{font-size:14px;font-weight:650;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-heading p{font-size:10px;color:var(--muted);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-pill{font-size:9px;font-weight:500;border:1px solid var(--line);border-radius:20px;padding:4px 9px;white-space:nowrap;color:var(--muted);background:var(--white)}.status-pill.closed{background:var(--paper);border-style:dashed}.timeline-wrap{position:relative;flex:1;min-height:0;display:flex}.timeline{overflow:auto;overscroll-behavior:contain;flex:1;min-height:0;padding:12px 28px 18px;scrollbar-width:thin;scrollbar-color:#d5d5d5 transparent;overflow-anchor:none}.messages{display:flex;flex-direction:column;gap:13px;min-width:0}.date-divider{text-align:center;margin:13px 0 8px;font-size:9px;color:#757575;display:flex;align-items:center;gap:15px}.date-divider::before,.date-divider::after{content:"";height:1px;background:#f0f0f0;flex:1}.message{max-width:min(78%,480px);display:flex;flex-direction:column;align-self:flex-start;min-width:0;gap:5px;position:relative}.message.own{align-self:flex-end;align-items:flex-end}.message-name{font-size:9px;color:var(--muted);padding:0 4px;max-width:100%;overflow-wrap:anywhere}.bubble{background:var(--paper);border:1px solid var(--line);border-radius:15px 15px 15px 4px;padding:11px 14px;min-width:65px;max-width:100%;box-shadow:0 3px 8px #11111102;overflow:hidden}.own .bubble{background:var(--ink);color:white;border-color:var(--ink);border-radius:15px 15px 4px 15px}.message-text{font-size:12px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}.message-meta{font-size:8px;line-height:1.5;display:flex;justify-content:flex-end;gap:6px;align-items:center;color:var(--muted);padding:0 4px;flex-wrap:wrap}.message-meta svg{width:12px;height:12px}.message.pending .bubble{opacity:.8}.message.failed .bubble{border-style:dashed;opacity:.75}.retry-button{font-size:10px;text-decoration:underline;padding:3px 0}.pending-progress{display:flex;align-items:center;gap:7px;font-size:10px;margin-top:7px;opacity:.8}.pending-progress .spinner{width:10px;height:10px;border-color:#ffffff50;border-top-color:white}.attachment-list{display:flex;flex-direction:column;gap:8px;margin-top:7px;min-width:0}.attachment-list:first-child{margin-top:0}.photo-button{display:block;padding:0;max-width:280px;width:100%;border-radius:10px;overflow:hidden;background:#f0f0f0}.photo-button img{display:block;max-width:100%;width:100%;height:auto;max-height:260px;object-fit:cover;min-width:140px}.document-card{display:flex;align-items:center;gap:9px;color:inherit;border:1px solid #d6d6d6;border-radius:10px;padding:10px;max-width:285px;min-width:0;text-decoration:none;font-weight:400}.document-card:hover{text-decoration:none;background:#11111106}.own .document-card{border-color:#4a4a4a}.own .document-card:hover{background:#ffffff0f}.document-card>span[data-icon]{padding:7px;border:1px solid #d6d6d6;border-radius:8px}.own .document-card>span[data-icon]{border-color:#4a4a4a}.document-info{min-width:0;flex:1}.document-info strong{font-size:10px;font-weight:550;display:block;overflow-wrap:anywhere}.document-info small{font-size:9px;opacity:.7;display:block;margin-top:4px}.history-control{text-align:center}.history-control button{font-size:10px;padding:10px}.new-messages{position:absolute;bottom:13px;right:22px;border:1px solid var(--line);background:var(--white);padding:10px 13px;border-radius:30px;box-shadow:0 3px 15px #11111115;font-size:10px;z-index:2}.new-messages svg{width:14px;height:14px}.typing-indicator{height:20px;min-height:20px;padding:0 30px;color:var(--muted);font-size:10px;display:flex;align-items:center}.room-notice{font-size:11px;padding:10px 25px;background:var(--paper);border-bottom:1px solid var(--line)}.composer{padding:4px 24px max(13px,env(safe-area-inset-bottom));background:var(--white)}.composer-row{display:flex;align-items:flex-end;gap:8px;border:1px solid var(--line);border-radius:14px;padding:7px;background:var(--white);box-shadow:0 4px 16px #11111104}.composer-row:focus-within{border-color:#999}.composer textarea{flex:1;min-width:0;border:0;resize:none;padding:10px 3px;min-height:40px;max-height:140px;outline:none!important;box-shadow:none;font-size:12px;line-height:20px;border-radius:0;background:transparent}.composer .attach-button{border-radius:10px;width:36px;min-width:36px;height:40px}.send-button{height:40px;width:40px;min-width:40px;background:var(--ink);color:white;border-radius:11px;flex-shrink:0}.send-button:hover:not(:disabled){background:#333}.send-button svg{width:18px;height:18px}.composer-meta{display:flex;justify-content:space-between;gap:10px;margin:8px 3px 0;color:#757575;font-size:9px}.composer-meta .desktop-enter{color:#767676}.composer .form-error{font-size:11px;margin-bottom:8px}.selected-files{display:flex;gap:8px;flex-wrap:wrap;padding:7px 0 11px;max-height:180px;overflow:auto}.file-chip{display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:6px;max-width:210px;min-width:0}.file-chip img{width:36px;height:36px;object-fit:cover;border-radius:6px}.file-chip .chip-info{min-width:0;flex:1}.file-chip strong{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:130px}.file-chip small{font-size:9px;color:var(--muted)}.file-chip button{width:28px;height:30px;min-width:28px}.file-chip button svg{width:13px;height:13px}.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;padding:35px 25px;gap:13px;color:var(--muted)}.empty-state h2{font-size:24px;color:var(--ink);font-weight:550}.empty-state p{font-size:12px;max-width:320px}.empty-state .eyebrow{font-size:8px}.empty-state .empty-icon{width:70px;height:70px;background:var(--paper);border:1px solid var(--line);border-radius:22px;margin-bottom:12px;color:var(--ink)}.empty-icon svg{width:29px;height:29px;stroke-width:1.3}.chat-empty{flex:1;min-height:0}.chat-empty .secondary{font-size:11px;margin-top:5px}.empty-messages{padding:40px 10px;color:var(--muted);text-align:center;font-size:12px}.empty-messages p{font-size:11px;margin-top:8px}.loading-state{display:flex;gap:10px;align-items:center;justify-content:center;color:var(--muted);padding:35px 16px;font-size:12px}.spinner{display:inline-block;width:16px;height:16px;border:1.5px solid #dedede;border-top-color:var(--ink);border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}@keyframes spin{to{transform:rotate(360deg)}}.settings-view{display:grid;grid-template-columns:minmax(0,540px) minmax(0,1fr);gap:20px;align-content:start}.settings-view>.section-heading{grid-column:1/-1;margin-bottom:2px}.settings-card{padding:25px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);align-self:start;box-shadow:var(--shadow)}.settings-card>h3{margin-bottom:15px}.settings-card>p{font-size:12px}.settings-card label{font-size:12px}.settings-card hr{border:0;border-top:1px solid var(--line);width:100%;margin:5px 0}.settings-card .secondary{font-size:11px;width:100%;margin-top:15px}.settings-card .field-help{margin-top:14px}.maintenance-box{display:flex;gap:12px;background:var(--paper);border-radius:12px;padding:15px;margin-top:20px}.maintenance-box strong{font-size:11px}.maintenance-box p{font-size:10px;color:var(--muted);margin-top:4px}.modal{border:1px solid var(--line);border-radius:18px;background:var(--white);color:var(--ink);padding:0;max-width:520px;width:calc(100% - 32px);max-height:calc(100dvh - 40px);box-shadow:0 30px 100px #0003;overflow:auto}.modal::backdrop{background:#11111166;backdrop-filter:blur(4px)}.modal-inner{padding:26px}.modal-header{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:14px}.modal h2{font-size:22px}.modal p{font-size:12px;color:var(--muted)}.modal .stack{margin-top:23px}.modal .stack label{font-size:12px}.modal .stack textarea{min-height:90px}.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}.modal-actions button{font-size:12px}.modal .form-error{margin-top:15px;color:var(--ink)}.code-display{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:clamp(15px,4vw,22px);letter-spacing:.04em;background:var(--paper);border:1px dashed #b3b3b3;border-radius:12px;padding:21px 10px;text-align:center;margin:20px 0;overflow-wrap:anywhere;font-weight:650}.code-warning{padding:12px;border:1px solid var(--line);border-radius:10px}.room-action-list{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:16px;margin-top:24px}.room-action-list button{justify-content:space-between;padding:13px 14px;border:1px solid var(--line);font-size:11px;font-weight:500;border-radius:10px}.room-action-list button:hover{background:var(--paper)}.room-action-list .destructive{border:1px dashed var(--ink);font-weight:650}.room-detail-info{background:var(--paper);padding:12px;border-radius:10px;font-size:11px;color:var(--muted);margin-top:15px}.image-modal{width:min(960px,calc(100% - 26px));max-width:960px}.image-preview{display:block;max-width:100%;max-height:70dvh;margin:0 auto;border-radius:10px;object-fit:contain}.toast{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:var(--ink);color:white;border:1px solid #555;border-radius:12px;box-shadow:0 10px 30px #1112;font-size:12px;padding:13px 18px;z-index:100;max-width:calc(100% - 32px);width:max-content;overflow-wrap:anywhere}.is-guest .room-view{grid-template-columns:minmax(0,1fr);max-width:1000px;width:100%;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}.is-guest .workspace{background:var(--paper)}.is-guest .workspace-header{height:72px;min-height:72px;padding:0 max(26px,calc((100vw - 940px)/2))}.guest-brand{font-size:23px}.is-guest .message{max-width:min(75%,480px)}.is-guest .chat-header{padding-left:28px;padding-right:28px}.is-guest .composer{padding-left:28px;padding-right:28px}.is-guest .timeline{padding-left:34px;padding-right:34px}.mobile-only,.mobile-chat-back{display:none}.drawer-overlay{position:fixed;inset:0;background:#1118;border-radius:0;z-index:39;width:100%;height:100%}.setup-body{background:var(--paper);padding:40px 20px;min-height:100dvh}.setup-card{max-width:660px;margin:0 auto;background:white;border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:var(--shadow)}.setup-card>.brand{margin-bottom:35px}.setup-card h1{font-size:32px;margin:12px 0 15px}.setup-card>p{font-size:13px;color:var(--muted);margin-bottom:22px}.setup-card h2{font-size:21px}.checklist{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:24px 0 30px}.check-row{display:flex;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);align-items:flex-start}.check-row:last-child{border-bottom:0}.check-symbol{display:flex;align-items:center;justify-content:center;width:23px;height:23px;min-width:23px;background:var(--paper);border:1px solid var(--line);border-radius:50%;font-size:12px;font-weight:700}.check-row strong{font-size:11px}.check-row p{font-size:11px;color:var(--muted);margin-top:3px}.footnote{font-size:10px!important;text-align:center;margin:26px 0 0!important}.noscript{position:fixed;top:0;left:0;right:0;padding:20px;text-align:center;background:#111;color:white;z-index:200}
@media(min-width:1500px){.sidebar{width:238px;min-width:238px}.room-view{grid-template-columns:355px minmax(0,1fr)}.rooms-panel-top{padding-left:24px;padding-right:24px}.room-list{padding:0 14px}.timeline{padding-left:40px;padding-right:40px}.message-text{font-size:14px}.message-meta{font-size:10px}.message-name{font-size:11px}.room-title-line strong{font-size:13px}.room-preview-line p{font-size:12px}.room-guest{font-size:11px}.composer textarea{font-size:14px}}
@media(max-width:1150px){.sidebar{width:184px;min-width:184px;padding:26px 12px 16px}.sidebar>.brand{font-size:19px;gap:5px}.sidebar>.brand img{width:30px;height:30px}.nav-button{font-size:11px;padding:12px;gap:9px}.room-view{grid-template-columns:280px minmax(0,1fr)}.workspace-header{padding:0 24px}.dashboard-view,.settings-view{padding:26px}.stats-grid{gap:11px}.stat-card{padding:17px 14px}.stat-card strong{font-size:30px}.section-heading h2{font-size:25px}.settings-view{grid-template-columns:minmax(0,1fr)}.settings-card{max-width:640px}.chat-header{padding:15px 18px}.timeline{padding-left:20px;padding-right:20px}.composer{padding-left:16px;padding-right:16px}.message{max-width:86%}.composer-meta .desktop-enter{display:none}.auth-story{padding:38px}.auth-main{padding-left:48px;padding-right:48px}}
@media(max-width:900px){.auth-screen{grid-template-columns:40% minmax(0,1fr)}.auth-story{min-width:0;padding:32px 26px}.story-copy h1{font-size:37px}.story-art{transform:scale(.82);transform-origin:left center;width:220px}.story-copy>p{font-size:14px}.auth-main{padding:36px 35px 24px}.auth-card h2{font-size:30px}.sidebar{position:fixed;left:0;top:0;height:var(--app-height,100dvh);width:240px;min-width:240px;z-index:40;transform:translateX(-100%);transition:transform .18s ease;padding:30px 18px 18px}.sidebar.drawer-open{transform:translateX(0)}.sidebar>.brand{font-size:22px;gap:8px}.nav-button{font-size:13px;padding:14px}.sidebar-tip{margin-bottom:30px}.mobile-only{display:inline-flex}.workspace-header{height:72px;min-height:72px;padding:0 20px;gap:12px}.room-view{grid-template-columns:285px minmax(0,1fr)}.dashboard-view{padding:25px}.settings-view{padding:25px}.stat-card strong{font-size:34px}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.section-heading{align-items:flex-start}.section-heading .primary{font-size:11px;padding:11px 13px}.section-heading h2{font-size:27px}.chat-header{padding:14px 16px}.chat-header>.avatar{width:35px;height:35px;font-size:11px}.chat-header .status-pill{display:none}.chat-heading h2{font-size:13px}.chat-heading p{font-size:9px}.message-text{font-size:13px}.message{max-width:90%}.timeline{padding-left:16px;padding-right:16px}.chat-empty h2{font-size:21px}}
@media(max-width:700px){.auth-screen{display:block;min-height:100dvh}.auth-story{display:none}.auth-main{min-height:100dvh;padding:27px 25px 24px}.mobile-brand{display:flex;font-size:22px}.auth-card{padding:55px 0 35px;max-width:430px}.auth-card h2{font-size:32px}.auth-description{font-size:14px;margin-bottom:28px}.auth-main input{font-size:16px;min-height:49px}.auth-bottom{margin-top:auto;padding-top:20px}.auth-security{font-size:10px}.auth-card .code-input{font-size:15px;letter-spacing:.05em}.workspace-header{height:65px;min-height:65px;padding:0 14px;gap:9px}.page-heading h1{font-size:17px}.page-heading .eyebrow{font-size:7px}.connection{font-size:9px;gap:5px}.header-right{gap:8px}.connection i{width:5px;height:5px}.room-view{display:block;position:relative;overflow:hidden}.rooms-panel{height:100%;width:100%;border-right:0}.rooms-panel-top{padding:21px 21px 11px}.row-between h2{font-size:21px}.row-between .icon-button{width:40px;height:40px}.search-box{margin:20px 0 12px}.search-box input{font-size:16px;height:46px;padding-left:40px}.search-box>span[data-icon]{top:15px;left:13px}.filter-label,.filter-label select{font-size:12px}.room-list{padding:0 12px}.room-item{gap:13px;padding:16px 10px}.room-item .avatar{width:45px;height:45px;font-size:12px;border-radius:14px}.room-title-line strong{font-size:14px}.room-title-line time{font-size:10px}.room-guest{font-size:11px;margin-top:5px}.room-preview-line p{font-size:12px}.room-preview-line{margin-top:7px}.room-item.selected{background:var(--white);border-color:transparent}.room-pagination{padding-bottom:env(safe-area-inset-bottom);min-height:calc(54px + env(safe-area-inset-bottom));height:auto;font-size:11px}.is-admin .conversation{display:none;height:100%;width:100%}.is-admin .room-view.show-conversation .rooms-panel{display:none}.is-admin .room-view.show-conversation .conversation{display:flex}.is-admin .room-view.show-conversation{height:100%}.mobile-chat-back{display:inline-flex;width:32px;min-width:32px;height:38px;margin-left:-6px}.chat-header{min-height:72px;gap:9px;padding:12px 16px}.chat-header>.avatar{width:36px;height:36px;font-size:11px;border-radius:12px}.chat-heading h2{font-size:14px}.chat-heading p{font-size:10px}.chat-header>.icon-button:last-child{width:30px;min-width:30px}.chat-header .status-pill{display:inline-flex;font-size:8px;padding:3px 7px}.is-admin .chat-header .status-pill{display:none}.timeline{padding:8px 17px 14px}.message{max-width:86%;gap:5px}.message-text{font-size:14px;line-height:1.6}.message-name{font-size:10px}.message-meta{font-size:9px}.bubble{padding:10px 13px;border-radius:15px 15px 15px 4px}.own .bubble{border-radius:15px 15px 4px 15px}.messages{gap:15px}.date-divider{font-size:10px;margin-top:17px}.photo-button{max-width:245px}.photo-button img{min-width:100px;max-height:250px}.document-card{max-width:245px;gap:8px;padding:9px}.document-info strong{font-size:11px}.document-info small{font-size:9px}.document-card>span[data-icon]{padding:5px}.typing-indicator{height:21px;min-height:21px;padding:0 20px;font-size:10px}.composer{padding:4px 12px max(10px,env(safe-area-inset-bottom))}.composer-row{padding:5px;gap:4px;border-radius:14px}.composer textarea{font-size:16px;line-height:22px;padding:8px 3px;min-height:40px;max-height:120px}.composer-meta{font-size:8px;margin-top:6px}.composer .attach-button{width:32px;min-width:32px}.send-button{width:39px;min-width:39px;height:39px}.room-notice{padding:9px 18px;font-size:10px}.new-messages{font-size:10px;right:16px;bottom:10px}.dashboard-view,.settings-view{padding:23px 18px}.section-heading{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:23px}.section-heading h2{font-size:28px;max-width:290px;line-height:1.2;margin-top:11px}.section-heading p{font-size:12px}.section-heading .primary{font-size:12px;padding:12px 15px}.stats-grid{gap:12px}.stat-card{padding:16px}.stat-card strong{font-size:34px}.stat-card>span{font-size:11px}.stat-card small{font-size:9px}.stat-card svg{width:19px;height:19px}.panel-heading{padding:18px;gap:12px}.panel-heading h3{font-size:15px}.panel-heading p{font-size:10px}.panel-heading .text-button{font-size:10px;white-space:nowrap}.panel-heading .text-button svg{width:13px;height:13px}.recent-room{padding:16px 18px;gap:10px}.recent-room .avatar{width:35px;height:35px;border-radius:11px;font-size:11px}.recent-room strong{font-size:12px}.recent-room .status-pill{display:none}.recent-room p{font-size:10px}.recent-room time{font-size:9px}.dashboard-note{font-size:10px;align-items:flex-start;line-height:1.8}.settings-view{gap:20px}.settings-card{padding:20px}.settings-card input,.settings-card select{font-size:16px}.settings-card>p{font-size:12px}.is-guest .workspace-header{padding:0 17px;min-height:65px;height:65px}.guest-brand{font-size:21px;gap:8px}.guest-brand img{width:30px;height:30px}.is-guest .room-view{border:0;display:flex;flex-direction:column}.is-guest .conversation{flex:1}.is-guest .chat-header{padding-left:18px;padding-right:15px}.is-guest .timeline{padding-left:17px;padding-right:17px}.is-guest .composer{padding-left:12px;padding-right:12px}.is-guest .message{max-width:86%}.empty-state h2{font-size:22px}.modal-inner{padding:23px 20px}.modal h2{font-size:21px}.modal input,.modal select,.modal textarea{font-size:16px}.modal .stack label{font-size:12px}.modal-actions{gap:8px}.modal-actions button{font-size:11px;padding:12px 14px}.setup-body{padding:20px 13px}.setup-card{padding:26px 21px;border-radius:17px}.setup-card h1{font-size:28px}.setup-card input,.setup-card select{font-size:16px}.setup-card>.brand{margin-bottom:30px}.setup-card>.eyebrow{font-size:9px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.spinner{border-style:dotted}}
/* Ruang thumbnail dicadangkan agar pemuatan gambar tidak menggeser pesan lama. */
.photo-button img{height:180px;aspect-ratio:13/9;object-fit:cover}
@media(max-width:700px){.photo-button img{height:170px}}

/* Ukuran teks percakapan tetap nyaman pada layar desktop maupun ponsel. */
.message-text{font-size:14px}.message-name{font-size:11px}.message-meta{font-size:10px}.date-divider{font-size:10px}.composer-meta{font-size:10px}.room-title-line strong{font-size:13px}.room-preview-line p{font-size:12px}.room-guest{font-size:11px}

/* Ssstttttt UI 1 | Aset lokal, tanpa build/dependency eksternal. */
:root {
    font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --shadow: 0 8px 32px #11111104;
    --muted: #6b6b6b;
}
body { font-size: 14px; }
button, input, textarea, select { font-family: inherit; }
h1, h2, h3 { font-weight: 700; }
.primary { font-weight: 650; box-shadow: 0 3px 8px #11111108; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid #777; outline-offset: 4px;
}
.sidebar {
    width: 248px; min-width: 248px; padding: 32px 24px 22px;
    background: linear-gradient(145deg, #101010, #0c0c0c 65%, #171717);
}
.sidebar > .brand { padding: 0; gap: 11px; font-size: 28px; letter-spacing: -1.3px; }
.sidebar > .brand img { width: 44px; height: 44px; border: 0; border-radius: 15px; }
.sidebar nav { margin-top: 44px; gap: 10px; }
.nav-button { font-size: 14px; gap: 14px; padding: 16px 17px; min-height: 53px; font-weight: 500; border-radius: 12px; }
.nav-button svg { width: 22px; height: 22px; }
.nav-button.active { box-shadow: inset 0 0 0 1px #e5e5e5, 0 3px 10px #0002; }
.sidebar-tip {
    margin: auto 0 14px; padding: 23px 20px; border-radius: 15px;
    background: linear-gradient(135deg, #202020, #171717); border: 1px solid #353535;
}
.sidebar-tip > span svg { width: 23px; height: 23px; }
.sidebar-tip > p { font-size: 14px; margin: 16px 0 4px; }
.sidebar-tip small { font-size: 12px; line-height: 1.8; }
.sidebar-help { color: #ddd; padding: 12px 0 0; font-size: 12px; gap: 9px; font-weight: 500; }
.sidebar-help svg { width: 15px; height: 15px; }
.sidebar-help:hover { color: #fff; text-decoration: underline; }
.logout { padding-left: 15px; min-height: 44px; }
.workspace-header { height: 80px; min-height: 80px; padding: 0 32px; gap: 22px; border-color: #ededed; }
.global-search {
    width: min(590px, 55%); min-width: 130px; position: relative; display: flex; align-items: center;
    gap: 11px; border: 1px solid #e7e7e7; background: #f7f7f7; border-radius: 13px; padding: 0 14px;
}
.global-search > span svg { width: 19px; height: 19px; }
.global-search:focus-within { border-color: #888; box-shadow: 0 0 0 3px #11111107; }
.global-search input { border: 0; padding: 12px 0; background: transparent; font-size: 13px; border-radius: 0; min-width: 0; outline: none; height: 44px; }
.global-search input:focus-visible { outline: none; }
.global-search kbd { white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; font: 11px inherit; color: #777; }
.global-search kbd b { border: 1px solid #ddd; padding: 0 5px; border-radius: 4px; font-weight: 500; }
.header-right { gap: 17px; min-width: 0; }
.connection-group { flex-shrink: 0; }
.connection { font-size: 12px; color: #242424; gap: 9px; }
.connection i { width: 8px; height: 8px; background: #292929; }
.connection.problem i { background: transparent; border: 2px solid #777; }
.connection-group > small { display: block; margin: 1px 0 0 17px; font-size: 10px; color: var(--muted); }
.notification-button { position: relative; width: 40px; height: 40px; color: #161616; }
.notification-button svg { width: 22px; height: 22px; }
.notification-dot { position: absolute; top: 5px; right: 6px; background: #111; width: 7px; height: 7px; border: 2px solid white; border-radius: 50%; }
.header-profile { border-left: 1px solid var(--line); border-radius: 0; padding: 0 0 0 18px; gap: 12px; text-align: left; min-width: 0; }
.header-profile .avatar { width: 43px; height: 43px; border-radius: 50%; background: #111; font-size: 13px; border: 0; }
.header-profile .profile-copy strong { color: #111; font-size: 13px; max-width: 135px; font-weight: 650; }
.header-profile .profile-copy span { color: #777; font-size: 11px; margin-top: 4px; font-weight: 400; }
.profile-chevron { margin-left: 12px; }
.profile-chevron svg { width: 16px; height: 16px; }
.dashboard-view { background: #fafafa; padding: 26px 32px 18px; scrollbar-width: thin; scrollbar-color: #d5d5d5 transparent; }
.dashboard-hero { position: relative; display: flex; align-items: center; gap: 24px; min-height: 150px; padding: 0 0 22px; isolation: isolate; }
.dashboard-hero::before { content: ""; position: absolute; inset: -26px -32px 0 40%; z-index: -1; background: url("hero-waves.svg") right center / 770px 225px no-repeat; opacity: .85; pointer-events: none; }
.hero-copy { flex: 1; min-width: 0; }
.hero-copy .eyebrow { font-size: 10px; letter-spacing: .14em; }
.hero-copy h2 { margin: 13px 0 9px; font-size: clamp(30px, 2.75vw, 44px); letter-spacing: -.045em; line-height: 1.14; font-weight: 760; }
.hero-copy p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.hero-note { width: 160px; color: #444; margin: 4px 5px 0 auto; font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; font-style: italic; font-size: 17px; text-align: center; line-height: 1.5; transform: rotate(-9deg); flex-shrink: 0; }
.hero-note > span { display: block; width: 20px; height: 1px; background: #555; margin: 10px auto 0; transform: rotate(-6deg); }
.hero-create { flex-shrink: 0; font-size: 14px; padding: 18px 23px; min-height: 56px; border-radius: 13px; }
.hero-create svg { width: 20px; height: 20px; }
.stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; margin: 5px 0 24px; }
.stat-card { position: relative; text-align: left; padding: 20px 18px; display: flex; justify-content: flex-start; align-items: flex-start; gap: 15px; min-height: 157px; border-radius: 16px; font-weight: 400; overflow: hidden; }
.stat-card:hover { border-color: #bbb; box-shadow: 0 9px 25px #11111107; }
.stat-card > span { color: inherit; font-size: inherit; }
.stat-card .stat-icon { width: 47px; height: 47px; display: grid; place-items: center; border: 1px solid #eaeaea; border-radius: 50%; background: linear-gradient(145deg, #f7f7f7, #eee); flex: 0 0 47px; }
.stat-card .stat-icon svg { width: 23px; height: 23px; color: #111; }
.stat-content { display: flex; flex-direction: column; min-width: 0; padding-top: 6px; flex: 1; }
.stat-title { font-size: 13px; font-weight: 550; margin-bottom: 10px; line-height: 1.3; }
.stat-value-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.stat-card strong { font-size: 38px; line-height: 1; letter-spacing: -.045em; font-weight: 730; }
.stat-hint { border-radius: 30px; padding: 5px 8px; color: #666; background: #f6f6f6; font-size: 10px; line-height: 1.4; font-weight: 500; white-space: nowrap; }
.stat-card small { margin-top: 12px; font-size: 11px; color: var(--muted); line-height: 1.4; font-weight: 400; }
.stat-chevron { position: absolute; top: 25px; right: 13px; }
.stat-chevron svg { width: 14px; height: 14px; color: #777; }
.dark-stat { background: linear-gradient(140deg, #0d0d0d, #232323); border-color: #272727; color: #fff; }
.dark-stat::after { content: ""; position: absolute; width: 180px; height: 130px; border: 1px solid #ffffff06; background: #ffffff02; right: -45px; bottom: -54px; border-radius: 50%; transform: rotate(-20deg); pointer-events: none; }
.dark-stat .stat-icon { background: #ffffff0d; border-color: #ffffff12; }
.dark-stat .stat-icon svg, .dark-stat .stat-title, .dark-stat .stat-chevron svg { color: #f5f5f5; }
.dark-stat .stat-hint { background: #ffffff0e; color: #ddd; }
.dark-stat small { color: #c4c4c4; }
.dashboard-columns { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(340px, 1fr); gap: 20px; align-items: start; }
.dashboard-panel { margin-top: 0; border-radius: 16px; border-color: #e8e8e8; box-shadow: 0 10px 32px #11111103; }
.panel-heading { display: flex; gap: 14px; align-items: center; padding: 20px; border-bottom: 0; }
.panel-icon { width: 41px; height: 41px; display: grid; place-items: center; background: linear-gradient(140deg, #f7f7f7, #efefef); border: 1px solid #eee; border-radius: 13px; flex-shrink: 0; }
.panel-icon svg { width: 23px; height: 23px; }
.panel-heading h3 { font-size: 18px; line-height: 1.25; letter-spacing: -.025em; }
.panel-heading p { font-size: 12px; margin-top: 5px; color: var(--muted); }
.panel-heading .text-button { margin-left: auto; white-space: nowrap; font-size: 12px; gap: 9px; color: #666; font-weight: 500; }
.panel-heading .text-button svg { width: 18px; height: 18px; }
.activity-panel { min-width: 0; }
.activity-table-wrap { padding: 0 18px; }
.activity-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; text-align: left; }
.activity-table th { font-size: 9px; letter-spacing: .015em; font-weight: 500; color: #737373; padding: 11px 9px; white-space: nowrap; background: #f7f7f7; }
.activity-table th:first-child { width: 32%; border-radius: 9px 0 0 9px; padding-left: 12px; }
.activity-table th:nth-child(2) { width: 35%; }
.activity-table th:nth-child(3) { width: 15%; }
.activity-table th:nth-child(4) { width: 12%; font-size: 8px; text-align: center; }
.activity-table th:last-child { width: 6%; border-radius: 0 9px 9px 0; }
.activity-table td { padding: 18px 8px; border-bottom: 1px solid #efefef; vertical-align: middle; }
.activity-table tr:last-child td { border-bottom: 0; }
.activity-table tr[data-recent-id] { cursor: pointer; }
.activity-table tr[data-recent-id]:hover { background: #fafafa; }
.activity-table .room-cell-button { width: 100%; justify-content: flex-start; gap: 12px; text-align: left; padding: 0; min-width: 0; font-weight: 400; border-radius: 8px; }
.activity-table .avatar { width: 37px; height: 37px; min-width: 37px; border-radius: 50%; font-size: 11px; color: white; background: linear-gradient(135deg, #171717, #363636); border: 0; }
.activity-table .room-cell-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.activity-table .room-cell-copy strong { font-size: 12px; font-weight: 650; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.activity-table .room-cell-copy small { font-size: 10px; color: #747474; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.activity-table .preview-cell p { font-size: 11px; color: #6b6b6b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.6; }
.activity-table .time-cell time { font-size: 10px; color: #757575; white-space: nowrap; }
.activity-table .unread-cell { text-align: center; }
.activity-table .unread-badge { display: inline-block; padding: 3px 6px; border-radius: 6px; min-width: 22px; font-size: 10px; background: #111; color: #fff; }
.activity-table .unread-badge.zero { color: #777; background: #f2f2f2; }
.activity-table .actions-cell { padding-left: 0; padding-right: 0; }
.activity-table .actions-cell button { width: 28px; min-width: 28px; height: 32px; }
.activity-table .actions-cell svg { width: 15px; height: 15px; }
.activity-table .empty-state { min-height: 320px; padding: 52px 15px; }
.activity-table .empty-state .secondary { margin-top: 18px; font-size: 12px; }
.activity-table .empty-state h3 { font-size: 17px; }
.activity-table .empty-state p { font-size: 12px; }
.activity-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 22px; border-top: 1px solid #eee; gap: 12px; }
.activity-footer > span { font-size: 10px; color: #777; display: inline-flex; align-items: center; gap: 6px; }
.live-dot { width: 5px; height: 5px; background: #777; border-radius: 50%; }
.activity-footer .text-button { font-size: 10px; font-weight: 500; gap: 4px; }
.activity-footer svg { width: 13px; height: 13px; }
.insights-heading { gap: 10px; padding: 20px 18px 18px; }
.insights-heading .panel-icon { width: 35px; height: 35px; border-radius: 11px; }
.insights-heading h3 { font-size: 16px; letter-spacing: -.035em; white-space: nowrap; }
.period-select { margin-left: auto; min-width: 0; }
.period-select select { font-size: 10px; padding: 9px 5px 9px 8px; border-radius: 8px; background: white; height: 33px; min-width: 100px; width: auto; font-weight: 500; }
.performance-metrics { display: grid; grid-template-columns: 1fr 1fr 1.1fr; padding: 0 18px 17px; }
.performance-metrics > div { display: flex; flex-direction: column; min-width: 0; align-items: flex-start; gap: 6px; padding-left: 15px; border-left: 1px solid #eee; }
.performance-metrics > div:first-child { padding-left: 0; border: 0; }
.performance-metrics strong { font-size: 24px; font-weight: 750; letter-spacing: -.04em; line-height: 1.25; }
.performance-metrics > div > span { color: #737373; font-size: 10px; white-space: nowrap; }
.trend-pill { color: #4b4b4b; background: #f1f1f1; font-size: 10px; padding: 4px 7px; border-radius: 6px; display: inline-flex; align-items: center; line-height: 1.3; max-width: 100%; }
.dark-pill { color: #fff; background: #151515; }
.activity-chart { margin: 5px 18px 0; min-height: 151px; position: relative; }
.chart-stage { height: 155px; padding: 0 0 21px 24px; position: relative; }
.chart-y-axis { position: absolute; left: 0; top: 0; bottom: 21px; width: 22px; display: flex; flex-direction: column; justify-content: space-between; font-size: 9px; color: #777; }
.chart-plot { position: relative; display: flex; height: 100%; gap: 8px; align-items: flex-end; background: repeating-linear-gradient(to top, #ebebeb 0, #ebebeb 1px, transparent 1px, transparent 33.3333%); border-bottom: 1px solid #ddd; }
.chart-column { position: relative; flex: 1; min-width: 0; display: flex; justify-content: center; align-items: flex-end; height: 100%; }
.chart-bar { height: var(--bar-height, 0%); min-height: 2px; width: 78%; display: block; padding: 0; border-radius: 5px 5px 0 0; background: linear-gradient(90deg, #d1d1d1, #c6c6c6); position: relative; transition: height .3s ease; }
.chart-column:last-child .chart-bar { background: #111; }
.chart-bar:focus-visible { outline-offset: 2px; }
.chart-bar:hover { background: #888; }
.chart-label { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: 9px; color: #757575; white-space: nowrap; }
.chart-tooltip { position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%); z-index: 3; display: none; min-width: 85px; color: white; background: #111; border-radius: 7px; font-size: 10px; text-align: center; padding: 7px 9px; pointer-events: none; white-space: nowrap; box-shadow: 0 3px 12px #0002; }
.chart-tooltip small { font-size: 9px; display: block; margin-top: 3px; font-weight: 400; color: #bbb; }
.chart-column:first-child .chart-tooltip { left: 0; transform: none; }
.chart-column:last-child .chart-tooltip { left: auto; right: -3px; transform: none; }
.chart-bar:hover .chart-tooltip, .chart-bar:focus .chart-tooltip { display: block; }
.chart-description { font-size: 9px; color: #757575; margin: 11px 18px 17px; line-height: 1.6; }
.insights-error { background: #f5f5f5; border-left: 2px solid #111; margin: 0 18px 18px; padding: 10px 12px; font-size: 12px; }
#insightsBody[aria-busy="true"] { opacity: .6; }
.room-distribution { border-top: 1px solid #eee; padding: 16px 18px 11px; }
.distribution-heading { display: flex; align-items: center; gap: 11px; }
.distribution-heading .panel-icon { width: 33px; height: 33px; border-radius: 10px; }
.distribution-heading .panel-icon svg { width: 20px; height: 20px; }
.distribution-heading h3 { font-size: 16px; letter-spacing: -.03em; }
.distribution-body { display: flex; align-items: center; gap: 17px; padding: 9px 0 0; }
.donut-wrap { width: 104px; height: 104px; position: relative; flex-shrink: 0; }
.room-donut { width: 100%; height: 100%; }
.donut-track { stroke: #efefef; }
.donut-label { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; pointer-events: none; }
.donut-label strong { font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: -.04em; }
.donut-label > span { font-size: 9px; color: #777; }
.distribution-legend { display: flex; flex-direction: column; gap: 13px; width: 100%; min-width: 0; }
.distribution-legend > div { display: flex; align-items: center; gap: 9px; font-size: 10px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.active-dot { background: #111; }.closed-dot { background: #999; }.waiting-dot { background: #d8d8d8; }
.distribution-legend > div > span { color: #686868; flex: 1; min-width: 0; }
.distribution-legend strong { min-width: 17px; font-size: 10px; font-weight: 650; text-align: right; }
.distribution-legend small { min-width: 28px; color: #777; text-align: right; font-size: 9px; }
.distribution-note { font-size: 9px; color: #777; margin-top: 9px; line-height: 1.6; }
.insights-footer { border-top: 1px solid #eee; padding: 11px 18px; display: flex; align-items: center; gap: 6px; font-size: 9px; color: #777; }
.insights-footer svg { width: 12px; height: 12px; }
.dashboard-footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 19px 3px 0; color: #858585; font-size: 10px; }
.dashboard-footer .text-button { font-size: 10px; font-weight: 400; gap: 6px; }
.dashboard-footer svg { width: 13px; height: 13px; }
/* Percakapan dan pengaturan berbagi bahasa visual dashboard. */
.room-view { grid-template-columns: 324px minmax(0, 1fr); }
.rooms-panel-top { padding: 25px 23px 16px; }
.row-between h2 { font-size: 21px; font-weight: 700; }
.search-box { background: #fafafa; border-radius: 11px; }
.search-box input { background: transparent; }
.room-list { padding: 0 12px; }
.room-item { border-radius: 13px; padding: 17px 12px; margin-bottom: 4px; }
.room-item.selected { background: #f0f0f0; }
.room-item .avatar { background: #252525; color: #fff; border-radius: 50%; border: 0; }
.room-title-line strong { font-size: 13px; font-weight: 650; }
.room-preview-line p { font-size: 12px; }
.chat-header { min-height: 86px; padding: 19px 28px; border-bottom-color: #ececec; }
.chat-header .avatar { border-radius: 50%; }
.chat-heading h2 { font-size: 16px; font-weight: 650; }
.chat-heading p { font-size: 11px; }
.timeline { background: #fcfcfc; padding: 20px 32px 24px; }
.bubble { box-shadow: 0 2px 5px #11111103; border-radius: 17px; }
.message.own .bubble { background: #151515; }
.message-text { font-size: 14px; line-height: 1.7; }
.message-name { font-size: 11px; }
.date-divider { font-size: 10px; margin: 16px 0; }
.composer { padding: 12px 26px max(17px, env(safe-area-inset-bottom)); border-top: 1px solid #f1f1f1; }
.composer-row { padding: 8px; border-radius: 16px; }
.composer textarea { font-size: 14px; }
.send-button { border-radius: 12px; }
.settings-view { padding: 32px; background: #fafafa; gap: 24px; }
.settings-view .section-heading h2 { font-size: 32px; font-weight: 700; }
.settings-card { padding: 28px; border-color: #e8e8e8; border-radius: 16px; }
.settings-card label { font-size: 13px; }.settings-card > p { font-size: 13px; }
.auth-story { background: radial-gradient(ellipse at 15% 15%, #2a2a2a, transparent 55%), #101010; }
.auth-story .brand { font-size: 31px; letter-spacing: -1.2px; }
.auth-story .brand img { width: 46px; height: 46px; border: 0; }
.story-copy h1 { font-weight: 700; }
.auth-card h2 { font-weight: 730; }
.auth-main { background: #fff; }
.auth-card input { background: #fcfcfc; }
.auth-bottom { font-size: 12px; }
.is-guest .workspace-header { height: 76px; min-height: 76px; }
.is-guest .room-view { max-width: 1050px; box-shadow: 0 0 70px #11111103; }
.is-guest .workspace { background: #f7f7f7; }
.guest-brand { font-size: 25px; letter-spacing: -1px; }
.modal { border-radius: 20px; }
.modal-inner { padding: 28px; }
.modal h2 { font-size: 23px; font-weight: 700; }
.modal .stack { gap: 17px; }
.modal input, .modal textarea, .modal select { background: #fcfcfc; }
.help-copy p + p { margin-top: 15px; }.help-copy p { font-size: 13px; color: #626262; }
.help-copy strong { color: #111; }
@media (min-width: 1600px) {
    .sidebar { width: 268px; min-width: 268px; padding: 32px 25px 24px; }
    .dashboard-view { padding-top: 30px; }
    .dashboard-hero { min-height: 150px; }
    .stat-card { min-height: 159px; padding: 21px; gap: 20px; }
    .stat-card .stat-icon { width: 53px; height: 53px; flex-basis: 53px; }
    .stat-card strong { font-size: 42px; }
    .stat-title { font-size: 14px; }.stat-card small { font-size: 12px; }
    .panel-heading { padding: 22px; }
    .activity-table th { font-size: 10px; }.activity-table th:nth-child(4) { font-size: 9px; }
    .activity-table .room-cell-copy strong { font-size: 13px; }.activity-table .room-cell-copy small { font-size: 11px; }
    .activity-table .preview-cell p { font-size: 12px; }.activity-table .time-cell time { font-size: 11px; }
    .activity-table td { padding-top: 20px; padding-bottom: 20px; }
    .insights-heading h3 { font-size: 18px; }
    .performance-metrics strong { font-size: 27px; }.performance-metrics > div > span { font-size: 11px; }
    .distribution-legend > div, .distribution-legend strong { font-size: 12px; }
}
@media (max-width: 1360px) and (min-width: 901px) {
    .sidebar { width: 214px; min-width: 214px; padding: 28px 17px 20px; }
    .sidebar > .brand { font-size: 25px; gap: 8px; }.sidebar > .brand img { width: 39px; height: 39px; }
    .nav-button { padding: 15px 14px; font-size: 13px; }
    .hero-note { display: none; }
    .dashboard-columns { grid-template-columns: minmax(0, 1.55fr) minmax(330px, 1fr); gap: 16px; }
    .dashboard-view { padding-left: 25px; padding-right: 25px; }
    .stat-card { padding: 18px 14px; gap: 10px; min-height: 146px; }
    .stat-card .stat-icon { width: 39px; height: 39px; flex-basis: 39px; }
    .stat-card strong { font-size: 34px; }.stat-value-row { gap: 7px; }.stat-hint { font-size: 9px; padding: 3px 5px; }
    .stat-title { font-size: 12px; }.stat-card small { font-size: 10px; }
    .stat-chevron { right: 8px; top: 21px; }.stat-chevron svg { width: 11px; }
    .activity-table th:nth-child(4) { font-size: 0; }.activity-table th:nth-child(4)::after { content: "BARU"; font-size: 9px; }
    .activity-table .room-cell-button { gap: 7px; }.activity-table .avatar { width: 30px; height: 30px; min-width: 30px; }
    .activity-table td { padding-left: 5px; padding-right: 5px; }.activity-table .time-cell time { font-size: 9px; }
    .insights-heading { gap: 8px; padding-left: 15px; padding-right: 15px; }.insights-heading h3 { font-size: 14px; }
    .performance-metrics { padding-left: 15px; padding-right: 15px; }.performance-metrics > div { padding-left: 10px; }
    .header-right { gap: 10px; }.header-profile { padding-left: 12px; gap: 9px; }.profile-chevron { display: none; }
}
@media (max-width: 1100px) and (min-width: 901px) {
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
    .stat-card { min-height: 130px; padding: 18px; gap: 15px; }
    .stat-card .stat-icon { width: 45px; height: 45px; flex-basis: 45px; }
    .dashboard-columns { grid-template-columns: minmax(0, 1fr); }
    .insights-panel { display: grid; grid-template-columns: 1.3fr 1fr; }
    .insights-heading, #insightsBody, #insightsError { grid-column: 1; }
    .room-distribution { grid-column: 2; grid-row: 1 / span 3; border-top: 0; border-left: 1px solid #eee; }
    .distribution-body { flex-direction: column; }.distribution-legend { padding: 0 15px; }
    .insights-footer { grid-column: 1 / -1; }
    .connection-group { display: none; }.global-search { width: auto; flex: 1; }
    .header-profile .profile-copy { display: none; }
}
@media (max-width: 900px) {
    .sidebar { width: 248px; min-width: 248px; padding: 27px 22px 18px; }
    .sidebar > .brand { font-size: 27px; gap: 10px; }.sidebar > .brand img { width: 43px; height: 43px; }
    .sidebar nav { margin-top: 36px; }.sidebar-tip { margin-bottom: 14px; }
    .workspace-header { height: 74px; min-height: 74px; padding: 0 22px; gap: 14px; }
    .global-search { flex: 1; width: auto; }.header-right { gap: 8px; }
    .header-profile { padding-left: 12px; }.profile-chevron { display: none; }
    .header-profile .profile-copy { display: none; }
    .connection-group { display: none; }
    .is-guest .connection-group { display: block; }.is-guest .connection-group > small { display: none; }
    .dashboard-view { padding: 25px 24px 16px; }
    .dashboard-hero { min-height: 137px; gap: 12px; }
    .hero-copy h2 { font-size: 32px; }.hero-copy p { font-size: 12px; }.hero-note { display: none; }
    .hero-create { padding: 15px 18px; min-height: 49px; font-size: 12px; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .stat-card { padding: 18px 20px; gap: 19px; min-height: 133px; }
    .stat-card strong { font-size: 37px; }.stat-card small { font-size: 11px; }.stat-title { font-size: 13px; }
    .dashboard-columns { grid-template-columns: minmax(0, 1fr); }
    .insights-panel { display: grid; grid-template-columns: 1.3fr 1fr; }
    .insights-heading, #insightsBody, #insightsError { grid-column: 1; }
    .room-distribution { grid-column: 2; grid-row: 1 / span 3; border-top: 0; border-left: 1px solid #eee; padding: 20px; }
    .distribution-body { flex-direction: column; gap: 8px; }.distribution-legend { padding: 0 5px; }
    .donut-wrap { width: 108px; height: 108px; }
    .insights-footer { grid-column: 1 / -1; }
    .room-view { grid-template-columns: 285px minmax(0, 1fr); }
    .settings-view { padding: 26px; }
}
@media (max-width: 700px) {
    .workspace-header { height: 65px; min-height: 65px; gap: 9px; padding: 0 13px; }
    .global-search { padding: 0 10px; gap: 7px; border-radius: 10px; }
    .global-search input { font-size: 12px; height: 38px; }.global-search kbd { display: none; }
    .global-search > span svg { width: 17px; height: 17px; }
    .header-profile { border-left: 0; padding: 0; }.header-profile .avatar { width: 34px; height: 34px; font-size: 11px; }
    .header-right { gap: 3px; }.notification-button { display: none; }
    .dashboard-view { padding: 22px 16px max(20px, env(safe-area-inset-bottom)); }
    .dashboard-hero { display: flex; flex-wrap: wrap; min-height: auto; padding-bottom: 22px; gap: 16px; }
    .dashboard-hero::before { inset: -22px -16px 0 10%; opacity: .6; background-size: 650px auto; }
    .hero-copy { flex-basis: 100%; }.hero-copy .eyebrow { font-size: 9px; }
    .hero-copy h2 { font-size: 32px; line-height: 1.13; margin: 11px 0; letter-spacing: -.04em; }
    .hero-copy p { font-size: 12px; max-width: 420px; }.hero-break { display: none; }
    .hero-create { padding: 13px 18px; min-height: 44px; font-size: 12px; border-radius: 11px; }
    .stats-grid { gap: 11px; margin-top: 0; margin-bottom: 19px; }
    .stat-card { min-height: 146px; padding: 15px 13px; gap: 8px; display: block; }
    .stat-card .stat-icon { width: 32px; height: 32px; position: absolute; top: 14px; left: 12px; border-radius: 11px; }
    .stat-card .stat-icon svg { width: 18px; height: 18px; }
    .stat-content { padding-top: 0; }.stat-title { padding-left: 39px; min-height: 34px; margin-bottom: 8px; display: flex; align-items: center; font-size: 11px; font-weight: 600; }
    .stat-card strong { font-size: 32px; }.stat-value-row { gap: 8px; }.stat-hint { font-size: 8px; padding: 4px 6px; }
    .stat-card small { font-size: 9px; margin-top: 8px; }.stat-chevron { display: none; }
    .dashboard-columns { gap: 17px; }.dashboard-panel { border-radius: 14px; }
    .panel-heading { padding: 16px 13px; gap: 9px; }.panel-icon { width: 33px; height: 33px; border-radius: 11px; }
    .panel-icon svg { width: 19px; height: 19px; }.panel-heading h3 { font-size: 16px; }.panel-heading p { font-size: 10px; }
    .panel-heading .text-button { font-size: 9px; gap: 4px; }.panel-heading .text-button svg { width: 14px; height: 14px; }
    .activity-table-wrap { padding: 0 10px; }
    .activity-table th:nth-child(2), .activity-table th:nth-child(3) { display: none; }
    .activity-table th:first-child { width: 71%; font-size: 9px; }.activity-table th:nth-child(4) { width: 18%; font-size: 8px; }.activity-table th:last-child { width: 11%; }
    .activity-table td { padding: 14px 7px; }.activity-table .preview-cell, .activity-table .time-cell { display: none; }
    .activity-table .room-cell-button { gap: 10px; }.activity-table .room-cell-copy strong { font-size: 12px; }.activity-table .room-cell-copy small { font-size: 10px; }
    .activity-table .room-cell-copy .mobile-last-preview { display: block; font-size: 10px; color: #777; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .activity-table .avatar { width: 34px; height: 34px; min-width: 34px; }
    .activity-table .empty-state { min-height: 235px; padding: 30px 6px; }.activity-table .empty-state h3 { font-size: 16px; }
    .activity-footer { padding: 10px 15px; }.activity-footer > span { font-size: 9px; }.activity-footer .text-button { font-size: 9px; }
    .insights-panel { display: block; }.insights-heading { padding: 17px 15px; gap: 8px; }.insights-heading h3 { font-size: 15px; }
    .period-select select { font-size: 9px; min-width: 88px; padding-left: 5px; }.insights-heading .panel-icon { width: 31px; height: 31px; }
    .performance-metrics { padding: 0 16px 15px; gap: 0; }.performance-metrics > div { padding-left: 12px; }
    .performance-metrics strong { font-size: 23px; }.performance-metrics > div > span { font-size: 9px; }.trend-pill { font-size: 9px; padding: 4px 6px; }
    .activity-chart { margin-left: 16px; margin-right: 16px; }.chart-label { font-size: 8px; }.chart-plot { gap: 6px; }
    .chart-description { font-size: 9px; margin-left: 16px; margin-right: 16px; }
    .room-distribution { border-left: 0; border-top: 1px solid #eee; padding: 17px 17px 12px; }
    .distribution-body { flex-direction: row; gap: 17px; }.donut-wrap { width: 102px; height: 102px; }
    .distribution-legend { padding: 0; }.distribution-legend > div { gap: 7px; }
    .dashboard-footer { padding-top: 12px; font-size: 9px; align-items: flex-start; }.dashboard-footer .text-button { padding: 0; font-size: 9px; }
    .room-view { display: block; }.room-list { padding: 0 11px; }.room-item { padding: 16px 13px; }
    .room-title-line strong { font-size: 14px; }.rooms-panel-top { padding: 21px; }
    .chat-header { min-height: 75px; padding: 12px 15px; }.chat-heading h2 { font-size: 15px; }
    .timeline { padding: 16px 16px 20px; }.message-text { font-size: 14px; }.message-name { font-size: 10px; }
    .composer, .is-guest .composer { padding: 10px 11px max(12px, env(safe-area-inset-bottom)); }.composer textarea { font-size: 16px; }
    .composer-meta { font-size: 9px; }
    .settings-view { padding: 24px 17px; }.settings-card { padding: 23px 20px; }.settings-view .section-heading h2 { font-size: 30px; }
    .settings-card label { font-size: 12px; }.settings-card input, .settings-card select { font-size: 16px; }
    .auth-main { padding: 30px 25px 24px; }.auth-card h2 { font-size: 32px; }.mobile-brand { font-size: 27px; }
    .mobile-brand img { width: 37px; height: 37px; }.auth-card { padding-top: 45px; }
    .is-guest .workspace-header { height: 66px; min-height: 66px; padding: 0 17px; }.guest-brand { font-size: 24px; }
    .is-guest .connection { font-size: 10px; }.is-guest .connection i { width: 6px; height: 6px; }
    .is-guest .timeline { padding: 15px 17px 21px; }
    .modal-inner { padding: 24px 21px; }.modal input, .modal textarea, .modal select { font-size: 16px; }
}
@media (min-width: 701px) { .mobile-last-preview { display: none; } }
@media (prefers-reduced-motion: reduce) { .chart-bar { transition: none; } }
/* Panel analitik ringkas agar seluruh komposisi seimbang di desktop. */
.chart-stage { height: 124px; }
.activity-chart { min-height: 125px; }
.room-distribution { padding-top: 13px; }
.distribution-body { padding-top: 5px; }
.settings-card[aria-busy="true"] { opacity: .65; }
.dashboard-hero::before { right: 0; }
@media (min-width: 701px) { .activity-table td { padding-top: 15px; padding-bottom: 15px; } }
/* Elemen pembaca layar tetap berada di dalam shell yang bisa digulir. */
.app-shell { position: relative; }