/* Demo recreation of workspace.html, hosted_pbx_shell.py and the live phone theme. */
.web-preview { container-type: inline-size; }
.w-workspace { position:relative; display:grid; grid-template-columns:190px minmax(0,1fr); height:760px; overflow:hidden; color:#302819; background:#f5f1e8; font:400 13px/1.45 Inter,ui-sans-serif,system-ui,sans-serif; }
.w-workspace button { cursor:pointer; font:inherit; }
.w-workspace button:focus-visible, .w-workspace input:focus-visible, .w-workspace select:focus-visible { outline:3px solid #b58a2b; outline-offset:2px; }
.w-sidebar { display:flex; flex-direction:column; gap:12px; padding:20px 12px; background:#17150f; color:#fff8e7; }
.w-brand { display:flex; align-items:center; gap:8px; padding-bottom:18px; border-bottom:1px solid #ffffff20; }
.w-brand img { width:36px; height:42px; object-fit:contain; }
.w-brand div,.w-sidebar-footer div { display:grid; }
.w-brand small,.w-sidebar-footer small { color:#c9bc9e; font-size:10px; }
.w-location-label { display:grid; gap:6px; font-size:10px; color:#d7c9aa; }
.w-workspace select,.w-workspace input { max-width:100%; width:100%; min-width:0; padding:10px; border:1px solid #d7cbb7; border-radius:10px; color:#302819; background:#fffdf8; font:inherit; }
.w-sidebar select { font-size:11px; background:#2d281e; color:#fff8e7; border-color:#685534; }
.w-portal-nav { display:grid; gap:5px; }
.w-portal-nav>small { padding:10px; font-size:9px; letter-spacing:.12em; color:#cfba89; }
.w-portal-nav button,.w-sidebar-action { display:flex; align-items:center; gap:10px; padding:11px 10px; border:1px solid transparent; border-radius:9px; background:transparent; color:#f4e7ca; text-align:left; font-weight:650; }
.w-portal-nav button.is-active { border-color:#b58a2b70; background:#b58a2b25; color:#fff8e7; }
.w-portal-nav button:hover,.w-sidebar-action:hover { background:#ffffff12; }
.w-sidebar-footer { display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:15px; border-top:1px solid #ffffff20; }
.w-sidebar-footer .avatar { width:30px; height:30px; font-size:12px; }
.w-sidebar-action { padding:4px 8px; }
.w-portal { min-width:0; padding:24px; overflow:auto; }
.w-context { display:flex; flex-wrap:wrap; gap:5px 10px; padding-bottom:15px; border-bottom:1px solid #ded5c4; }
.w-context small { width:100%; color:#8a6418; font-size:9px; letter-spacing:.1em; }
.w-context span { color:#6f6352; font-size:12px; }
.w-page-heading { margin:20px 0; }
.w-page-heading h2 { margin:0; color:#17150f; font:700 28px/1.2 Inter,system-ui,sans-serif; letter-spacing:-.03em; }
.w-page-heading p,.w-card p { color:#6f6352; margin:8px 0 15px; }
.w-card { padding:18px; margin:0 0 16px; border:1px solid #e1d6c2; border-radius:12px; background:#fffdf8; box-shadow:0 8px 20px #30281908; }
.w-card h3,.w-phone-screen h3 { margin:0 0 12px; font:700 19px/1.25 Inter,system-ui,sans-serif; letter-spacing:-.025em; }
.w-card-title { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:15px; }
.w-card-title h3 { margin:0; }
.w-card-title>span { font-size:11px; color:#6f6352; }
.w-filter-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.w-workspace label { display:grid; gap:7px; margin:0 0 10px; font-size:11px; font-weight:650; }
.w-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; padding:8px 12px; border:1px solid #d9cbb1; border-radius:10px; background:#fffdf8; color:#302819; font-weight:650!important; }
.w-button:hover,.w-icon:hover { background:#f5e6bd; }
.w-button.w-primary { background:#17150f; color:#fff8e7; border-color:#b58a2b90; }
.w-card-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:14px; }
.w-page-tabs,.w-segments { display:flex; gap:5px; margin-bottom:16px; }
.w-page-tabs button,.w-segments button { padding:11px 14px; border:1px solid transparent; border-radius:10px; background:transparent; color:#6f6352; font-weight:700; }
.w-page-tabs .is-active,.w-segments .is-active { background:#f4e5bc; color:#745013; }
.w-table-scroll { overflow:auto; }
.w-call-table table { width:100%; border-collapse:collapse; text-align:left; white-space:nowrap; font-size:11px; }
.w-call-table th { color:#6f6352; background:#f8f3e8; font-size:10px; }
.w-call-table th,.w-call-table td { padding:12px 9px; border-bottom:1px solid #e6ddcc; }
.w-call-table td small { display:block; }
.w-link { padding:4px 0; border:0; background:transparent; color:#8a6418; text-align:left; font-weight:700!important; }
.w-status { padding:4px 8px; border-radius:20px; background:#edf3e7; color:#45612e; font-size:10px; white-space:nowrap; }
.w-status-missed { color:#a32d26; background:#fcedeb; }
.w-item { display:flex; align-items:center; gap:10px; padding:16px 0; border-bottom:1px solid #e6ddcc; }
.w-item>div { flex:1; min-width:0; }
.w-item b,.w-item small { display:block; overflow-wrap:anywhere; }
.w-item small { color:#6f6352; font-size:11px; margin-top:4px; }
.w-file { display:grid; place-items:center; width:32px; height:40px; border-radius:5px; background:#efe7d7; color:#8a6418; font-size:10px; font-weight:700; flex-shrink:0; }
.w-phone { position:absolute; z-index:3; bottom:16px; right:16px; display:flex; flex-direction:column; width:360px; height:660px; max-width:calc(100% - 24px); max-height:calc(100% - 70px); border:1px solid #ddcba6; border-radius:20px; overflow:hidden; background:#f8f3e8; box-shadow:0 16px 45px #30281930; }
.w-phone.is-expanded { width:480px; height:680px; }
.w-phone-bar { display:flex; align-items:center; gap:12px; flex-shrink:0; height:52px; padding:0 14px; border-bottom:1px solid #dfd3bc; background:#fffdf8; }
.w-phone-bar>b { display:flex; align-items:center; gap:8px; margin-right:auto; font-size:13px; white-space:nowrap; }
.w-phone-bar i,.w-launcher i { width:9px; height:9px; border-radius:50%; background:#58713e; box-shadow:0 0 0 3px #58713e20; }
.w-phone-bar small { font-size:10px; color:#6f6352; }
.w-phone-bar button { border:0; background:transparent; color:#6f6352; padding:7px; }
.w-phone-body { flex:1; min-height:0; overflow:hidden; }
.w-phone-screen { height:100%; padding:16px; overflow:auto; }
.w-phone-screen>p { color:#6f6352; font-size:11px; }
.w-dialer.phone-card { max-width:none; margin:0; padding:0; border:0; border-radius:12px; box-shadow:0 8px 18px #30281909; background:#fffdf8; }
.w-dialer>input { height:43px; text-align:center; }
.w-keypad-heading { display:flex; justify-content:space-between; padding:18px 12px 4px; font-size:12px; }
.w-keypad-heading button { border:0; background:transparent; color:#8a6418; }
.w-keypad { display:grid; grid-template-columns:repeat(3,1fr); padding:10px 0; }
.w-keypad button { display:grid; gap:1px; justify-items:center; padding:12px; border:0; background:transparent; font-size:25px; font-weight:650; }
.w-keypad button:hover { background:#f4e5bc; border-radius:12px; }
.w-keypad small { font-size:8px; letter-spacing:.16em; color:#6f6352; }
.w-call-origin { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; margin-top:14px; border-radius:18px; overflow:hidden; background:#f4e5bc; }
.w-call-origin>.w-button { border-radius:18px; }
.w-workspace .w-origin { position:relative; margin:0; margin-top:12px; padding:10px; border-radius:16px; background:#f4e5bc; color:#745013; font-size:9px; text-transform:uppercase; letter-spacing:.07em; }
.w-origin select { background:#efe7d7; font-size:11px; text-transform:none; letter-spacing:0; padding:8px; }
.w-origin small { font-size:10px; letter-spacing:0; text-transform:none; }
.w-call-origin .w-origin { margin:0; }
.w-call-preview { display:block; margin:12px auto 0; font-size:11px!important; }
.w-control-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:12px 0; }
.w-phone-screen>.w-card { margin-top:14px; padding:16px; }
.w-phone-screen .w-card>button { margin-top:8px; }
.w-icon { display:grid; place-items:center; flex:0 0 33px; width:33px; height:33px; padding:6px; border:1px solid #dfd3bc; border-radius:9px; background:#fffdf8; color:#8a6418; }
.w-phone .avatar { width:36px; height:36px; flex-shrink:0; font-size:15px; }
.w-recent b { font-size:12px; }
.w-phone-nav.web-nav { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); flex-shrink:0; gap:2px; margin:0; padding:8px 5px; border-top:1px solid #dfd3bc; background:#f8f3e8; }
.w-phone-nav.web-nav button { position:relative; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:18px auto; justify-items:center; gap:5px; min-width:0; min-height:51px; padding:8px 1px; border:1px solid transparent; border-radius:12px; color:#75674e; background:transparent; font-size:9px; }
.w-phone-nav.web-nav button.is-active { border-color:#dfd3bc; color:#17150f; background:#fffdf8; box-shadow:0 2px 5px #30281908; }
.w-phone-nav svg { width:18px; height:18px; }
.w-phone-nav .nav-badge { position:absolute; right:3px; top:0; font-size:8px; min-width:13px; height:13px; }
.w-messages { display:flex; flex-direction:column; position:relative; padding-bottom:8px; }
.w-segments { flex-shrink:0; padding:3px; border:1px solid #dfd3bc; border-radius:16px; }
.w-segments button { flex:1; font-size:12px; }
.w-segments .is-active { border-color:#dfd3bc; background:#fffdf8; color:#17150f; }
.w-thread-location { flex-shrink:0; margin:3px 0 12px; font-size:10px!important; }
.w-thread { display:flex; align-items:center; gap:10px; width:100%; padding:15px 12px; margin:10px 0 16px; border:1px solid #d8c7a4; border-radius:13px; background:#fffdf8; text-align:left; box-shadow:0 4px 10px #30281906; }
.w-thread:hover { background:#f4e5bc; }
.w-thread>span:not(.avatar) { display:grid; gap:5px; flex:1; min-width:0; }
.w-thread b { font-size:13px; }.w-thread small { color:#6f6352; font-size:11px; }
.w-full { width:100%; }
.w-conversation.conversation { position:relative; display:flex; flex-direction:column; flex:1; min-height:0; border:0; border-radius:0; overflow:visible; background:transparent; }
.w-thread-head { display:flex; align-items:center; gap:6px; flex-shrink:0; padding-bottom:10px; border-bottom:1px solid #dfd3bc; }
.w-thread-head>b { flex:1; font-size:12px; }
.w-feed.message-feed { flex:1; min-height:0; padding:12px 0; gap:10px; }
.w-feed .message { max-width:87%; padding:12px; border-radius:14px; background:#f8f3e8; box-shadow:none; }
.w-feed .message.mine { background:#a87921; border-color:#bb9549; border-radius:14px 14px 4px 14px; }
.w-feed .message p { font-size:12px; }.w-feed .message b,.w-feed .message time { font-size:10px; }
.w-composer.composer { flex-shrink:0; grid-template-columns:30px minmax(0,1fr) 33px; padding:10px 0 5px; }
.w-composer input { height:39px; font-size:12px; border-radius:12px; }
.w-composer button { width:30px; height:30px; font-size:21px; }
.w-attachments { position:absolute; z-index:4; left:0; bottom:58px; display:grid; min-width:150px; padding:9px; border:1px solid #cdb88d; border-radius:16px; background:#fffdf8; box-shadow:0 10px 24px #30281920; }
.w-attachments button { display:flex; align-items:center; gap:12px; border:0; padding:10px; background:transparent; text-align:left; }
.w-launcher { position:absolute; z-index:4; right:16px; bottom:16px; display:flex; align-items:center; gap:9px; padding:14px 18px; border:1px solid #dfd3bc; border-radius:14px; background:#fffdf8; color:#302819; box-shadow:0 8px 25px #30281920; font-weight:700!important; }
.w-mobile-bar { display:none; }
@container (max-width: 700px) {
 .w-workspace { grid-template-columns:150px minmax(0,1fr); }
 .w-sidebar { padding:14px 8px; }.w-brand { gap:5px; }.w-brand b { font-size:11px; }.w-brand img { width:26px; }.w-portal-nav button { font-size:11px; padding:10px 7px; }
 .w-portal { padding:15px; }.w-page-heading h2 { font-size:24px; }.w-page-tabs { flex-wrap:wrap; }.w-filter-grid { grid-template-columns:1fr; }
 .w-phone { right:10px; bottom:10px; width:350px; }
}
@container (max-width: 480px) {
 .w-workspace { display:block; height:760px; }
 .w-sidebar { display:none; position:absolute; z-index:6; inset:0 auto 0 0; width:210px; box-shadow:10px 0 25px #30281920; }
 .w-workspace.is-menu-open .w-sidebar { display:flex; }
 .w-portal { height:100%; padding:12px; }
 .w-mobile-bar { display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; }
 .w-mobile-bar button { width:36px; height:36px; border:1px solid #d8c7a4; border-radius:9px; background:#fffdf8; }
 .w-phone { right:8px; bottom:8px; width:calc(100% - 16px); max-width:none; height:635px; }
 .w-phone.is-expanded { width:calc(100% - 16px); height:670px; }
 .w-phone-bar { gap:7px; padding:0 10px; }
 .w-phone-screen { padding:12px; }.w-phone-nav.web-nav { padding:7px 3px; }
}