/* ARA Workspace: blue, readable, and shared by desktop and mobile. */
:root{--green:#3267df;--teal:#2857bb;--ink:#17263e;--muted:#738097;--line:#e3e9f2;--paper:#f5f7fb;--shadow:0 12px 40px #162b4b12}
body{background:#f5f7fb;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Yu Gothic UI",Meiryo,sans-serif}
.workspace{grid-template-columns:80px 310px minmax(0,1fr);background:#fff}
.rail{background:#16273f;color:#cfdbed;border-right:0}
.rail .brand-mark,.auth-brand .brand-mark{background:#477df0;color:#fff;box-shadow:none}
.brand-mark:after{background:#b9d6ff}
.rail-action{color:#a8b8ce;border-radius:12px}
.rail-action:hover,.rail-action.active{background:#2a4364;color:white}
.rail-profile{background:#365278;color:#eaf2ff;border:1px solid #54769e}
.rail-caption{color:#879bb8}
.conversation-panel{background:#fff;border-color:var(--line)}
.conversation-header{padding:29px 23px 20px;border-bottom:0}
.conversation-header .eyebrow{color:#7890ad;letter-spacing:.13em;font-size:9px}
.conversation-header h1{font-size:25px;letter-spacing:-.02em}
.connection-indicator{color:#8390a3;font-size:11px}
.connection-indicator:before{background:#5aaa91}
.conversation-search{background:#f1f5fa;border:1px solid #e9eef5;border-radius:12px;margin:0 19px 18px}
.conversation-search input{font-size:13px}
.list-heading{font-size:11px;color:#7b889c;padding:0 23px 10px}
.conversation-list{padding:0 10px 12px}
.conversation-item{border-radius:12px;padding:15px 12px;background:transparent;border-color:transparent;min-height:77px}
.conversation-item:hover{background:#f4f7fc}
.conversation-item.selected{background:#eaf1ff;border-color:#dce8ff}
.conversation-name{font-size:13px;color:#263954}
.conversation-unread .conversation-name{color:#1b2d49}
.conversation-preview{font-size:11px;color:#8090a6}
.conversation-time{color:#8c9bb0;font-size:10px}
.conversation-row .room-pin{color:#9aa8bb}
.conversation-row .room-pin.is-pinned,.conversation-row .room-pin:hover{background:#edf3ff;color:#3267df}
.pin-section-heading{color:#8594a8;font-size:10px;letter-spacing:.08em}
.unread-count{background:#386fde;color:white}
.avatar,.avatar.group{background:#e2ebfb;color:#4b6d9e;border-radius:14px}
.avatar.tone-1{background:#e3ecff;color:#5c75ab}.avatar.tone-2{background:#e2f0f1;color:#4f8389}
.avatar.tone-3{background:#eee6fa;color:#8c6da5}.avatar.tone-4{background:#f4e9df;color:#a38262}
.conversation-footer{border-color:var(--line);background:#fafbfd;color:#94a0b1}
.chat-panel{background:#f5f7fb}
.chat-header{background:#fff;border-color:var(--line);height:90px;min-height:90px;padding:22px 30px}
.chat-header h2{color:#223650;font-size:18px}
.chat-subtitle{color:#8290a3;font-size:11px}
.chat-header-actions .icon-btn{color:#5e7697;border-radius:10px}
.icon-btn:hover{background:#edf3fc;color:#3567c9}
.chat-viewport{background:#f5f7fb}
.message-bubble{font-size:14px;line-height:1.85;border:1px solid #e6ecf4;background:white;color:#273a54;border-radius:15px;box-shadow:0 2px 8px #183c6b03}
.message-row.mine .message-bubble{background:#386ee0;color:white;border-color:#386ee0;border-radius:15px 3px 15px 15px}
.message-row:not(.mine) .message-bubble{border-radius:3px 15px 15px 15px}
.message-author{color:#74869e;font-size:11px}.message-meta{color:#94a1b3;font-size:10px}
.date-divider{color:#93a1b4;font-size:10px}.date-divider:before,.date-divider:after{background:#e4eaf3}
.chat-composer{background:#fff;border-color:var(--line);padding:16px 28px 18px}
.composer-box{background:#f8faff;border-color:#dce5f1;border-radius:14px;box-shadow:none}
.composer-box textarea{font-size:14px;padding:13px 15px}
.composer-help{color:#a0adbf;font-size:10px}
.send-button{background:#386ee0;border-radius:10px;width:42px;height:40px}
.send-button:hover,.btn.primary:hover{background:#2958c0}
.btn.primary{background:#386ee0;border-color:#386ee0}
.btn{border-color:#dce5f0;color:#4f6482;font-size:13px}.btn.primary{color:white}
/* Destructive actions keep a complete, readable palette in every state. */
.btn.danger{background:#b42318;border-color:#b42318;color:#fff;min-height:44px;font-weight:700}
.btn.danger:hover:not(:disabled){background:#912018;border-color:#912018;color:#fff}
.btn.danger:active:not(:disabled){background:#751a13;border-color:#751a13;color:#fff}
.btn.danger:focus-visible{outline:3px solid #b42318;outline-offset:3px}
.btn.danger:disabled{background:#e2e8f0;border-color:#cbd5e1;color:#475569;opacity:1;cursor:wait}
.chat-empty h2{color:#31496b}.chat-empty p{color:#90a0b6;font-size:13px;line-height:1.9}
.empty-art{background:#e8f0ff;color:#6c8fcc;box-shadow:none}
.chat-empty .eyebrow{color:#7d97bb}.chat-empty .empty-foot{color:#a3b0c2}
.auth-page{background:#fff}.auth-story{background:#162b49;color:#f5f8ff;overflow:hidden;position:relative}
.auth-story h1{color:#f1f6ff}.auth-story .eyebrow{color:#96b8ed}
.auth-story-description{color:#b3c6e0}.auth-story-footer{color:#809abb}
.auth-art-bubble{background:#25456c;border-color:#3a5c86}.auth-art-circle{background:#91b2e3}.auth-art-lines i{background:#668db9}
.auth-main{background:#fff}.auth-card>.muted{font-size:13px;color:#8896a8}
input:focus,textarea:focus,select:focus{border-color:#88a9e8;box-shadow:0 0 0 3px #3267df10}
button:focus-visible,a:focus-visible{outline-color:#85aaff}
.notice,.invite-result{background:#eef4ff;color:#4a6793;border-color:#d6e4fb}
.modal{background:#fff;color:#273b56;border-color:#dbe5f2}.modal::backdrop{background:#10254170}
.modal-head,.member-row,.detail-line{border-color:var(--line)}
.choice-tabs{background:#f1f5fb;border-color:#e1e8f3}.choice-tabs button.active{color:#3567c9}
.admin-header,.admin-panel{background:#fff}.admin-body{background:#f7f9fd}
.toast{background:#24496f;color:#f7faff}.toast.error{background:#984b52}
/* Keep the same video/audio elements alive while the message panel opens. */
.ara-call-overlay{background:#0b182cce;backdrop-filter:blur(9px)}
.ara-call-panel{background:#14243b;color:#edf4ff;border-color:#2e405a;border-radius:20px}
.ara-call-content{display:flex;flex:1;min-height:0;overflow:hidden}
.ara-call-content>.ara-call-body{min-width:0;flex:1}
.ara-call-panel.with-chat{width:min(1500px,100%)}
.ara-call-chat{flex:0 0 380px;min-width:0;display:flex;border-left:1px solid #344760;background:#f5f7fb;color:var(--ink)}
.ara-call-chat>.chat-panel{display:flex;flex:1;min-width:0;min-height:0;position:relative}
.ara-call-chat .chat-header{height:64px;min-height:64px;padding:12px 17px}
.ara-call-chat .chat-header h2{font-size:14px}.ara-call-chat .chat-subtitle{font-size:10px}
.ara-call-chat .chat-header .avatar,.ara-call-chat .chat-header-actions,.ara-call-chat .mobile-back{display:none}
.ara-call-chat .chat-viewport{padding:16px 14px}
.ara-call-chat .message-row.mine{margin-left:6%}.ara-call-chat .message-row:not(.mine){margin-right:4%}
.ara-call-chat .message-bubble{font-size:13px;padding:10px 12px}
.ara-call-chat .chat-composer{padding:11px 13px 12px}.ara-call-chat .composer-box textarea{font-size:13px}
.ara-call-chat .composer-help span:first-child{display:none}.ara-call-chat .new-messages{bottom:108px}
.ara-call-header,.ara-call-footer{border-color:#ffffff0f}.ara-call-eyebrow{color:#88a6d0}
.ara-call-status,.ara-call-timer{color:#99aecb}.ara-call-small-btn{color:#dce9fb;display:inline-flex;align-items:center;gap:7px}
.ara-call-small-btn[aria-pressed=true]{background:#3267df;border-color:#5787ec;color:#fff}
.ara-call-small-btn svg{width:16px;height:16px}
.ara-call-tile{background:#203750;border-color:#324963}.ara-call-tile.speaking{border-color:#89b0ff;box-shadow:inset 0 0 0 1px #89b0ff}
.ara-call-tile video{background:#101e31}.ara-call-tile.screen{background:#101e31}
.ara-call-avatar,.ara-call-tile:nth-child(3n+2) .ara-call-avatar,.ara-call-tile:nth-child(3n+3) .ara-call-avatar{background:#3b597e;color:#e0eeff}
.ara-call-name,.ara-call-mic-state,.ara-call-tile-note{background:#122a47d9}
.ara-call-control.off{background:#e1eafb;color:#223c60}.ara-call-control.sharing{background:#bcd5ff;color:#1d4070}
.ara-call-control.danger{background:#b85060;border-color:#b85060}.ara-call-footnote{color:#809aba}
.ara-call-notice{background:#34578024;border-color:#52749d55;color:#c4d8f4}
.ara-call-dock{background:#1c385b;border-color:#526f98}.ara-call-dock span{color:#b7ceee}
.ara-call-dock-pulse{background:#98c0ff}.ara-call-invite-title{color:#4268a3}
@media(max-width:1100px){.workspace{grid-template-columns:66px 265px minmax(0,1fr)}.chat-header{padding:18px 22px}.ara-call-chat{flex-basis:340px}.ara-call-panel.with-chat .ara-call-grid{grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))}}
@media(max-width:760px){
 .workspace{grid-template-columns:60px minmax(0,1fr)}.conversation-header{padding:25px 20px 20px}
 .rail-action{font-size:10px}.chat-header{height:75px;min-height:75px;padding:12px 14px}
 .chat-header h2{font-size:16px}.chat-header .chat-subtitle{font-size:10px}.chat-composer{padding:11px 13px max(13px,env(safe-area-inset-bottom))}
 .message-bubble{font-size:14px}.composer-box textarea{font-size:16px}.auth-main{padding:34px 27px}
 .ara-call-overlay{padding:0}.ara-call-panel{border-radius:0;height:100dvh;min-height:0}
 .ara-call-header{padding:12px;gap:8px;flex-wrap:wrap}.ara-call-heading{flex-basis:55%}.ara-call-title{font-size:15px}
 .ara-call-content{flex-direction:column}.ara-call-panel.with-chat .ara-call-body{flex:0 0 28%;min-height:120px;padding:8px}
 .ara-call-chat{flex:1;min-height:0;border-left:0;border-top:1px solid #dce5f1}
 .ara-call-chat .chat-header{display:none}.ara-call-chat .chat-panel{display:flex}
 .ara-call-panel.with-chat .ara-call-grid{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));grid-auto-rows:minmax(90px,1fr)}
 .ara-call-panel.with-chat .ara-call-tile,.ara-call-panel.with-chat .ara-call-grid.has-screens .ara-call-tile{min-height:90px;height:auto}
 .ara-call-panel.with-chat .ara-call-tile.screen{height:140px;min-height:90px}
 .ara-call-panel.with-chat .ara-call-notice{display:none}.ara-call-panel.with-chat .ara-call-avatar{width:42px;height:42px;border-radius:13px;font-size:20px}
 .ara-call-panel.with-chat .ara-call-footer{padding:7px 8px max(8px,env(safe-area-inset-bottom))}
 .ara-call-panel.with-chat .ara-call-control{min-height:42px;min-width:48px;padding:5px 7px;font-size:8px;gap:3px}
 .ara-call-panel.with-chat .ara-call-control svg{width:17px;height:17px}.ara-call-panel.with-chat .ara-call-footnote{display:none}
 .ara-call-chat .composer-box textarea{font-size:16px}.ara-call-chat .chat-composer{padding-bottom:9px}
}

@media(max-width:760px){.rail-management{display:none}}
.work-programs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.work-program{padding:14px;border:1px solid #dce5f1;border-radius:12px;background:#f8faff}
.work-program p{margin:8px 0 0;line-height:1.6}
.work-launch{display:flex;align-items:center;justify-content:center;gap:9px;min-height:46px;text-decoration:none}
.work-launch svg{width:18px;height:18px;flex-shrink:0}
.work-menu>.work-launch{width:100%;box-sizing:border-box}
.work-open-help p{margin:8px 0 0;line-height:1.7}
.work-launch-status:empty{display:none}
@media(max-width:760px){.rail-workspace:not(.in-desktop-host){display:none}.work-programs{grid-template-columns:1fr}}

/* Unread indicators and permanent conversation list inside the Windows host. */
.rail-action{position:relative}.rail-unread{position:absolute;right:-3px;top:2px;min-width:20px;height:20px;padding:0 5px;border-radius:11px;background:#d94763;color:#fff;font-size:11px;line-height:20px;font-weight:700;border:2px solid #16273f}
.rail-unread[hidden]{display:none}.unread-summary{border:0;background:#edf2ff;color:#2d59ba;border-radius:12px;padding:4px 8px;font-size:11px;white-space:nowrap}.unread-summary:disabled{background:transparent;color:#8996aa;cursor:default}
.conversation-unread .conversation-preview{color:#344865;font-weight:600}.conversation-row .unread-count{background:#d94763;min-width:21px;font-weight:700;flex-shrink:0}
.desktop-host .workspace.is-talk,.desktop-host .workspace.is-talk.has-chat{grid-template-columns:60px clamp(220px,31vw,280px) minmax(0,1fr)}
.desktop-host .workspace.is-talk>.rail{display:flex;grid-column:1;grid-row:1;padding:24px 5px 16px}
.desktop-host .workspace.is-talk>.conversation-panel{display:flex;grid-column:2;grid-row:1;min-width:0}
.desktop-host .workspace.is-talk>.chat-panel{display:flex;grid-column:3;grid-row:1;min-width:0;z-index:1}
.desktop-host .workspace.is-talk .mobile-back{display:none}.desktop-host .rail-action{width:49px}
.desktop-host .conversation-header{padding:24px 16px 18px}.desktop-host .conversation-header h1{font-size:22px}.desktop-host .conversation-search{margin:0 12px 15px}.desktop-host .list-heading{padding:0 13px 10px;gap:5px;letter-spacing:0}
.desktop-host .conversation-list{padding:0 7px 12px}.desktop-host .conversation-item{padding:13px 8px;gap:8px}.desktop-host .conversation-item .avatar{width:34px;height:34px;flex-basis:34px;font-size:13px}.desktop-host .conversation-row .room-pin{width:29px;min-width:29px;flex-basis:29px}
.desktop-host .chat-header{padding:16px 15px;gap:8px}.desktop-host .chat-header h2{font-size:15px}.desktop-host .chat-header-actions{gap:1px}.desktop-host .chat-header-actions .icon-btn{width:30px}
.desktop-host .chat-header .avatar{display:flex;width:32px;height:32px;flex-basis:32px;font-size:13px}.desktop-host .chat-viewport{padding:17px 15px}.desktop-host .chat-composer{padding:12px 15px}.desktop-host .composer-box textarea{font-size:14px}.desktop-host .chat-empty{padding:28px 18px}
.desktop-host .chat-empty h2{font-size:21px}.desktop-host .conversation-footer{padding:14px 13px;font-size:9px}

/* Profile photos keep the established avatar layout. */
.avatar { overflow:hidden; }
.avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.rail-profile { overflow:hidden; padding:0; }
.rail-profile .avatar { width:100%; height:100%; border-radius:inherit; }
.photo-editor { display:flex; gap:18px; align-items:center; margin-bottom:18px; }
.profile-photo-preview .avatar { width:84px; height:84px; border-radius:24px; font-size:28px; }
.photo-editor .stack { min-width:0; flex:1; }
.photo-editor input[type=file] { max-width:100%; font-size:12px; }
.invite-result textarea { min-height:170px; }
@media(max-width:480px) { .photo-editor { align-items:flex-start; flex-direction:column; } }

.desktop-host .conversation-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.45}.desktop-host .conversation-meta>.row:first-child{align-items:flex-start}
@media(max-width:680px){.desktop-host .conversation-time{display:none}}

.login-remember{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;color:#334155;font-size:13px;line-height:1.5;}
.login-remember input[type=checkbox]{width:18px;height:18px;min-width:18px;margin:0;padding:0;accent-color:#386ee0;}

.capture-preview>img{display:block;max-width:100%;max-height:55vh;object-fit:contain;margin:12px auto;border:1px solid #d2ddec;border-radius:8px}.capture-preview .modal-actions{display:flex;gap:10px;justify-content:flex-end}

/* Capture selection and drawing tools. Canvas coordinates are independent of CSS scaling. */
.modal:has(.capture-editor){width:min(1100px,calc(100vw - 28px));max-width:calc(100vw - 28px)}
.capture-editor{display:grid;gap:12px;min-width:0}.capture-editor-tools,.capture-editor-palette{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.capture-editor-tools .btn{min-height:42px;padding:8px 15px}.capture-editor-tools .btn[aria-pressed="true"]{color:#fff;background:#285fc7;border-color:#285fc7}
.capture-editor-control{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600}.capture-editor-control input[type="color"]{width:48px;height:38px;min-height:0;padding:3px;cursor:pointer}.capture-editor-control select{padding:7px 10px}
.capture-editor-stage{display:flex;justify-content:center;align-items:flex-start;overflow:auto;background:#d9e1ee;padding:8px;border:1px solid #bdcbe0;border-radius:10px;min-width:0}
.capture-editor-canvas{display:block;max-width:100%;max-height:52vh;width:auto;height:auto;touch-action:none;cursor:crosshair;user-select:none;background:#fff;box-shadow:0 2px 8px #182c4426}
.capture-editor-status{font-size:13px;color:#294b7f;line-height:1.65;min-height:22px}.capture-editor-actions{display:flex;justify-content:flex-end;gap:10px}.capture-editor-actions .btn{min-height:44px}
@media(max-width:760px){.capture-editor{gap:9px}.capture-editor-tools{gap:5px}.capture-editor-tools .btn{padding:7px 10px;flex:1;white-space:nowrap}.capture-editor-palette{gap:6px}.capture-editor-palette .btn{min-height:38px;padding:7px 9px}.capture-editor-canvas{max-height:42dvh}.capture-editor-stage{padding:4px}.capture-editor-actions .btn{flex:1}.capture-editor-status{font-size:12px}}

/* Chat images stay above the conversation, including the Windows host. */
.message-image-open{display:block;max-width:100%;padding:0;border:0;border-radius:12px;background:transparent;cursor:zoom-in;color:inherit}
.message-image-open:focus-visible{outline:3px solid #346be3;outline-offset:3px}
.modal.image-preview-modal{width:min(1100px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:0;overflow:hidden}
.image-preview-modal .modal-head{margin:0;padding:16px 20px}
.image-preview-modal .modal-content{padding:0;overflow:hidden;max-height:none}
.image-preview{display:flex;flex-direction:column;min-height:0}
.image-preview-stage{display:flex;justify-content:center;align-items:center;overflow:auto;min-height:80px;max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px);padding:12px;background:#102034}
.image-preview-full{display:block;max-width:100%;width:auto;height:auto;max-height:calc(100vh - 214px);max-height:calc(100dvh - 214px);object-fit:contain}
.image-preview-full[hidden]{display:none}
.image-preview-error{color:#fff;padding:24px}
.image-preview-actions{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;padding:12px 20px;background:#fff;border-top:1px solid #dbe5f2}
.image-preview-actions .btn{min-height:44px}
@media(max-width:600px){.image-preview-actions .btn{width:100%}}

.work-browser-fallback{margin-top:8px;white-space:normal;min-height:44px}

/* Keep both actions reachable when a narrow viewport wraps the footer. */
.modal.image-preview-modal[open]{display:flex;flex-direction:column}
.image-preview-modal .modal-head,.image-preview-actions{flex-shrink:0}
.image-preview-modal .modal-content{display:flex;flex-direction:column;min-height:0}
.image-preview-stage{flex:1 1 auto;min-height:0}