/* Afragram 2.5. Original UI components, composed from user-provided interface references.
   The final stylesheet intentionally resolves conflicts between legacy Afragram skins. */
:root{--af-ui-blue:#3390ec;--af-ui-light:#f0f0f2;--af-ui-white:#fff;--af-ui-black:#1c1d20;--af-ui-gray:#92979c;--af-ui-rule:#e8e8ea;--af-ui-chat:#dbe6e1;--af-ui-radius:22px;--af-ui-menu:#f1f2f4}
[data-theme=dark]{--af-ui-blue:#63b3f5;--af-ui-light:#18222d;--af-ui-white:#202d3a;--af-ui-black:#eef5fb;--af-ui-gray:#93a6b6;--af-ui-rule:#30404d;--af-ui-chat:#12202c;--af-ui-menu:#2a3947}
html,body,#app{overflow:hidden;background:var(--af-ui-light);color:var(--af-ui-black)}
body{background-image:none!important}
.workspace,.workspace .rail,.workspace .sidebar.glass,.workspace .main-pane,.workspace .chat-header,.workspace .mobile-nav{box-shadow:none!important;border-radius:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.workspace{max-width:none!important;padding:0!important;margin:0!important;gap:0!important;width:100%!important;height:100dvh;background:var(--af-ui-white)!important;grid-template-columns:70px minmax(285px,380px) minmax(0,1fr)!important;--list-bg:var(--af-ui-white);--field-bg:var(--af-ui-menu);--rail-bg:var(--af-ui-light);--af-panel:var(--af-ui-white);--af-rail:var(--af-ui-light);--af-side:var(--af-ui-white);--af-chat:var(--af-ui-chat);--border:var(--af-ui-rule);--muted:var(--af-ui-gray);--text:var(--af-ui-black)}
.workspace .rail{background:var(--af-ui-light)!important;border-inline-end:1px solid var(--af-ui-rule)!important;padding:10px 0 16px}
.workspace .rail>.icon-btn{margin-bottom:8px}
.workspace .rail .icon-btn,.workspace .folder-rail-button{color:var(--af-ui-gray)}
.workspace .folder-rail-button.active{background:color-mix(in srgb,var(--af-ui-blue) 11%,transparent)!important;color:var(--af-ui-blue)!important}
.workspace .rail-profile{margin-top:auto}
.workspace .sidebar.glass{background:var(--af-ui-white)!important;border-inline-end:1px solid var(--af-ui-rule)!important;border-top:0!important;border-bottom:0!important}
.workspace .side-head{padding:14px 14px 9px;background:var(--af-ui-white)!important}
.workspace .side-head .searchbox,.workspace .searchbox{background:var(--af-ui-menu)!important;border:1px solid transparent!important;border-radius:30px!important;min-height:43px!important;box-shadow:none!important;color:var(--af-ui-gray)!important}
.workspace .searchbox:focus-within{border-color:var(--af-ui-blue)!important}
.workspace .searchbox input{color:var(--af-ui-black)!important}
.workspace .searchbox input::placeholder{color:var(--af-ui-gray)}
.workspace .stories-strip{background:var(--af-ui-white);padding:4px 14px 12px;gap:12px;border-bottom:1px solid var(--af-ui-rule)}
.workspace .story-mini>span{color:var(--af-ui-black)}
.workspace .sidebar .chat-list{background:var(--af-ui-white)!important;scrollbar-color:#adb9c450 transparent}
.workspace .sidebar .chat-row{background:transparent;border:0!important;border-radius:0!important;padding:10px 13px!important;min-height:76px!important;gap:12px!important;color:var(--af-ui-black)!important;transition:background .13s ease!important}
html[dir=rtl] .workspace .sidebar .chat-row{direction:rtl!important}
html[dir=ltr] .workspace .sidebar .chat-row{direction:ltr!important}
.workspace .sidebar .chat-row:hover:not(.active){background:var(--af-ui-menu)!important}
.workspace .sidebar .chat-row.active{background:var(--af-ui-blue)!important;color:#fff!important}
.workspace .sidebar .chat-row.active .chat-name,.workspace .sidebar .chat-row.active .chat-snippet,.workspace .sidebar .chat-row.active .row-meta,.workspace .sidebar .chat-row.active time{color:#fff!important}
.workspace .sidebar .chat-row .avatar{width:53px;height:53px;flex:none}
.workspace .chat-name{font-size:15px!important;line-height:1.35!important;font-weight:600!important;color:inherit}
.workspace .sidebar .chat-snippet{font-size:13px!important;line-height:1.4!important;color:var(--af-ui-gray)}
.workspace .sidebar .row-meta{font-size:11px!important;gap:5px;color:var(--af-ui-gray)}
.workspace .sidebar .unread-count{background:var(--af-ui-blue)!important;color:#fff!important;box-shadow:none!important;border:0!important;font-size:11px!important}
.workspace .sidebar .chat-row.active .unread-count{background:#fff!important;color:var(--af-ui-blue)!important}
.workspace .archived-avatar{background:#8dbac9!important;color:#fff!important}
.workspace .side-footer{display:none}
.workspace .new-chat-fab{width:54px!important;height:54px!important;background:var(--af-ui-blue)!important;border-radius:50%!important;box-shadow:0 7px 18px #2685d142!important}
.workspace .main-pane{background:var(--af-ui-chat)!important;border:none!important;direction:inherit}
.workspace .empty-chat{background:var(--af-ui-chat)!important}
.workspace .empty-chat h2{background:#0008!important;color:#fff!important;border-radius:18px!important;padding:7px 16px!important;font-size:13px!important}
.workspace .chat-header{height:62px!important;padding:8px 18px!important;background:var(--af-ui-white)!important;border-bottom:1px solid var(--af-ui-rule)!important;color:var(--af-ui-black)}
.workspace .chat-header h2{font-size:15px!important;color:var(--af-ui-black)!important;font-weight:600}
.workspace .chat-header p{font-size:12px!important;color:var(--af-ui-gray)!important}
.workspace .chat-header .icon-btn{color:var(--af-ui-gray)}
.workspace .chat-header .icon-btn:hover{background:var(--af-ui-menu)!important;color:var(--af-ui-blue)!important}
.workspace .conversation{background:var(--af-ui-chat);background-image:radial-gradient(circle at 8% 12%,#86a89b15 0 1.5px,transparent 1.7px),radial-gradient(circle at 82% 74%,#8bae9b15 0 1px,transparent 1.2px);background-size:132px 132px,97px 97px}
.workspace .messages{background:transparent!important;gap:5px!important;padding-inline:clamp(13px,7vw,160px)!important}
.workspace .message .bubble{border-radius:16px!important;box-shadow:0 1px 2px #00000014!important;border:0!important}
[data-theme=light] .workspace .message:not(.outgoing) .bubble{background:#fff!important;color:#1c2529!important}
[data-theme=light] .workspace .message.own .bubble{background:#dff5d4!important;color:#172b1a!important}
[data-theme=dark] .workspace .message:not(.outgoing) .bubble{background:#243444!important;color:#f3f6fa!important}
[data-theme=dark] .workspace .message.own .bubble{background:#345d4b!important;color:#f4f9f6!important}
.workspace .message .message-text{line-height:1.55!important}
.workspace .composer-area{max-width:950px!important;margin-inline:auto!important;padding-bottom:calc(13px + env(safe-area-inset-bottom))!important}
.workspace .composer{background:var(--af-ui-white)!important;border-radius:24px!important;box-shadow:0 2px 7px #0002!important;border:none!important;color:var(--af-ui-black)}
.workspace #message-input{color:var(--af-ui-black)!important}
.workspace #message-input.is-empty:before{color:var(--af-ui-gray)}
.workspace .composer .icon-btn{color:var(--af-ui-gray)}
.workspace .composer .send-btn{border-radius:50%!important;background:var(--af-ui-blue)!important;color:white!important}
/* Consistent mobile navigation and message list */
.workspace .mobile-nav{background:var(--af-ui-white)!important;border-top:1px solid var(--af-ui-rule)!important;color:var(--af-ui-gray)!important}
.workspace .mobile-nav .rail-btn{color:var(--af-ui-gray)!important}
.workspace .mobile-nav .rail-btn.active{color:var(--af-ui-blue)!important;background:color-mix(in srgb,var(--af-ui-blue) 9%,transparent)!important}
/* Settings reference: gray canvas, white rounded cards and blue section titles */
.workspace .view-page:has(.settings-grid),.workspace .view-page.privacy-page,.workspace .af-settings-page,.workspace .view-page.appearance-page{background:var(--af-ui-light)!important;color:var(--af-ui-black)!important}
.workspace .view-page:has(.settings-grid){padding:0 18px 45px!important}
.workspace .settings-grid{max-width:735px;margin:0 auto}
.workspace .view-page:has(.settings-grid) .view-title,.workspace .view-page.privacy-page .view-title{position:sticky;top:0;z-index:4;min-height:76px;background:var(--af-ui-light)!important;padding:11px 12px!important;margin:0 0 13px!important;gap:20px;justify-content:flex-start}
.workspace .view-page:has(.settings-grid) .view-title h2,.workspace .view-page.privacy-page .view-title h2{font-size:23px!important;color:var(--af-ui-black);margin:0}
.workspace .view-page:has(.settings-grid) .view-title .icon-btn,.workspace .view-page.privacy-page .view-title .icon-btn{color:var(--af-ui-black)}
.workspace .view-page:has(.settings-grid) .card,.workspace .view-page.privacy-page .card{background:var(--af-ui-white)!important;border:none!important;border-radius:23px!important;padding:8px 20px!important;box-shadow:none!important;margin-bottom:18px!important}
.workspace .view-page:has(.settings-grid) .setting-row{display:flex;align-items:center;gap:17px;min-height:69px;padding:13px 7px!important;border-bottom:1px solid var(--af-ui-rule)!important;color:var(--af-ui-black)}
.workspace .view-page:has(.settings-grid) .setting-row:last-child{border-bottom:0!important}
.workspace .view-page:has(.settings-grid) .setting-icon{width:29px;height:29px;background:none!important;color:var(--af-ui-blue)!important;display:grid;place-items:center}
.workspace .view-page:has(.settings-grid) .setting-icon .icon{width:24px;height:24px}
.workspace .view-page:has(.settings-grid) .setting-row b{font-weight:500;font-size:16px}
.workspace .view-page:has(.settings-grid) .setting-row small{color:var(--af-ui-gray);font-size:13px}
.workspace .af-dashboard-card>.af-group-label,.workspace .view-page.privacy-page .section-caption{color:#2f92c4!important;padding:13px 10px 5px;font-size:16px;font-weight:600}
.workspace .af-dashboard-card .settings-profile{margin:8px 6px 12px!important;gap:18px}
.workspace .af-account-hero h2{font-size:20px;line-height:1.45;color:var(--af-ui-black)}
.workspace .af-account-hero p,.workspace .af-account-hero small{font-size:13px;color:var(--af-ui-gray)}
.workspace .af-account-hero>.icon-btn{color:var(--af-ui-blue)!important}
.workspace .view-page.privacy-page{padding:0 18px 40px!important}
.workspace .view-page.privacy-page .privacy-row{min-height:69px;padding:12px 12px;border-color:var(--af-ui-rule);color:var(--af-ui-black)}
.workspace .view-page.privacy-page .privacy-row>span{color:var(--af-ui-blue)!important}
.workspace .view-page.privacy-page .privacy-row b{font-weight:500;font-size:16px}
/* Shared detailed settings */
.workspace .af-settings-page{height:100%!important;overflow:auto!important;font-size:16px}
.workspace .af-settings-container{max-width:735px;margin:auto;min-height:100%;padding-bottom:55px}
.workspace .af-settings-header{height:77px;min-height:77px;background:var(--af-ui-light)!important;padding:11px 16px;gap:23px;position:sticky;top:0;z-index:7;box-shadow:none!important}
.workspace .af-settings-header h2{font-size:23px;font-weight:600;line-height:1.35;color:var(--af-ui-black);margin:0}
.workspace .af-settings-header .icon-btn{color:var(--af-ui-black)}
.workspace .af-settings-content{padding:0 18px 28px}
.workspace .af-settings-card{background:var(--af-ui-white)!important;border-radius:23px!important;border:none!important;box-shadow:none!important;padding:8px 21px!important;margin-bottom:18px!important;overflow:hidden}
.workspace .af-settings-card h3{padding:14px 7px 6px!important;margin:0;color:#2f92c4!important;font-size:16px!important;font-weight:600}
.workspace .af-setting-item,.workspace .af-switch-row,.workspace .af-language-row,.workspace .af-folder-line{min-height:70px;padding:14px 7px!important;gap:16px;color:var(--af-ui-black)!important;border:0;border-bottom:1px solid var(--af-ui-rule)!important;background:transparent!important;text-align:start!important;line-height:1.4;font-size:16px}
.workspace .af-settings-card>:last-child{border-bottom:0!important}
.workspace .af-setting-txt>b,.workspace .af-language-row b{font-size:16px!important;font-weight:450;line-height:1.4;color:var(--af-ui-black)}
.workspace .af-setting-txt small,.workspace .af-language-row small{font-size:13px!important;color:var(--af-ui-gray)}
.workspace .af-setting-ico{color:var(--af-ui-black);min-width:28px;width:28px}
.workspace .af-setting-ico svg{width:25px;height:25px}
.workspace .af-setting-trailing{font-size:16px!important;color:#3097ce!important}
.workspace .af-ui-toggle{width:39px!important;height:22px!important;flex:0 0 39px!important;background:#adb5ba!important;border-radius:20px!important}
.workspace .af-ui-toggle::before{width:17px;height:17px;top:2.5px;inset-inline-start:2.5px}
.workspace .af-switch-row input:checked+.af-ui-toggle{background:var(--af-ui-blue)!important}
.workspace .af-switch-row input:checked+.af-ui-toggle::before{transform:translateX(-17px)}
html[dir=ltr] .workspace .af-switch-row input:checked+.af-ui-toggle::before{transform:translateX(17px)}
.workspace .af-settings-note{font-size:14px;color:var(--af-ui-gray);padding:1px 21px 19px;line-height:1.65}
.workspace .af-folder-intro{min-height:235px;padding:26px 26px 27px;color:var(--af-ui-gray);line-height:1.5;font-size:15px}
.workspace .af-folder-illustration{font-size:78px}
.workspace .af-folder-line .af-folder-label{gap:18px}
.workspace .af-folder-line .af-folder-label b{font-size:16px;font-weight:450}
.workspace .af-create-folder{color:var(--af-ui-blue)!important;font-size:16px!important;font-weight:500;min-height:62px;padding:14px 8px}
.workspace .af-create-folder svg{width:24px;height:24px}
.workspace .af-small-action{background:var(--af-ui-blue);border-radius:25px!important;color:white;padding:7px 16px;font-size:13px}
.workspace .af-language-row{gap:28px;min-height:80px}
.workspace .af-radio{width:25px;height:25px;border:3px solid #adb5ba}
.workspace .af-radio.checked{background:var(--af-ui-blue);border-color:var(--af-ui-blue)}
.workspace .af-device-hero{padding:25px 16px;text-align:center;color:var(--af-ui-gray);display:flex;flex-direction:column;align-items:center;gap:12px}
.workspace .af-device-hero svg{width:90px;height:90px;color:#a8b2b9}
.workspace .af-device-hero p{max-width:390px;line-height:1.5}
.workspace .af-session-item{display:flex;align-items:center;gap:17px;padding:16px 6px;min-height:86px;border-bottom:1px solid var(--af-ui-rule)}
.workspace .af-session-icon{border-radius:50%;background:linear-gradient(140deg,#76c9e8,#3194d5);width:48px;height:48px;display:grid;place-items:center;color:white;flex-shrink:0}
.workspace .af-session-icon svg{width:25px;height:25px}
.workspace .af-session-item .af-setting-txt b{font-size:15px;overflow-wrap:anywhere}
.workspace .af-session-current{color:var(--af-ui-blue)}
.workspace .af-session-subtitle{color:#2f92c4;font-weight:600;margin:14px 6px 2px}
.workspace .af-session-terminate{color:#cf4444;padding:8px}
.workspace .af-terminate-all{color:#d44141!important;text-align:start!important;padding:20px 8px;display:flex;align-items:center;gap:13px;font-size:15px;width:100%}
.workspace .af-terminate-all .icon{width:23px;height:23px}
/* Theme gallery, profile and Premium share the same design language */
.workspace .appearance-page{padding:0 16px 38px!important}
.workspace .appearance-header{background:var(--af-ui-light)!important;color:var(--af-ui-black)!important;box-shadow:none!important;border:0!important}
.workspace .appearance-header h2{font-weight:600;font-size:23px}
.workspace .appearance-page .theme-card,.workspace .appearance-page .theme-preview{background:var(--af-ui-white)!important;color:var(--af-ui-black);border:0!important;border-radius:23px!important;box-shadow:none!important}
.workspace .appearance-page .theme-controls h3{color:#2f92c4}
.workspace .appearance-page .theme-preset{border-radius:16px!important;box-shadow:none!important}
.workspace .appearance-page input[type=color]{width:44px;height:44px;border-radius:50%}
.workspace .appearance-page input[type=range]{accent-color:var(--af-ui-blue)}
.modal.glass{background:var(--af-ui-white)!important;color:var(--af-ui-black)!important;border:0!important;border-radius:22px!important;box-shadow:0 15px 55px #0003!important}
.modal .modal-head h2{color:var(--af-ui-black)}
.modal .premium-hero{background:linear-gradient(125deg,#659ffa 0%,#986cff 54%,#d65cbb 100%)!important;color:white!important;border-radius:17px!important;padding:30px 20px}
.modal .premium-hero h2,.modal .premium-hero p{color:white!important}
.modal .premium-features{margin-top:12px;background:var(--af-ui-white);border-radius:19px;overflow:hidden}
.modal .premium-features .setting-row{padding:16px 7px!important;min-height:74px;border-bottom:1px solid var(--af-ui-rule)!important}
.modal .premium-features .setting-icon{border-radius:11px;background:linear-gradient(135deg,#63b9eb,#5ecc96)!important;color:white!important}
.modal .premium-features .setting-row b{color:var(--af-ui-black);font-size:15px}
.modal .premium-features .setting-row small{color:var(--af-ui-gray);font-size:13px}
.workspace .auth-page{background:var(--af-ui-light)!important;color:var(--af-ui-black)}
/* Responsive targets for Android / small-screen web */
@media (max-width:1000px) and (min-width:761px){.workspace{grid-template-columns:62px 320px minmax(0,1fr)!important}}
@media (max-width:760px){
 html,body,#app{width:100%;height:100dvh;overflow:hidden}
 .workspace{display:block!important;direction:inherit!important;height:100dvh!important;overflow:hidden!important}
 .workspace .rail{display:none!important}
 .workspace .sidebar.glass{height:100dvh!important;min-height:0!important;border:0!important;padding-bottom:calc(67px + env(safe-area-inset-bottom))}
 .workspace .side-head{padding:12px 15px 8px!important;min-height:98px}
 .workspace .side-head>.between{display:flex!important;justify-content:space-between!important;margin:0 0 9px!important}
 .workspace .side-head h1{font-size:24px!important;color:var(--af-ui-black);font-weight:600}
 .workspace .side-head .searchbox{height:44px!important}
 .workspace .mobile-main-menu{display:flex!important;color:var(--af-ui-blue)}
 .workspace .stories-strip{padding:6px 15px 11px!important}
 .workspace #filters{display:flex!important;white-space:nowrap;overflow:auto;background:var(--af-ui-white)!important;border-bottom:1px solid var(--af-ui-rule)!important;gap:0!important;padding:0 8px!important;scrollbar-width:none}
 .workspace .filter{border:0!important;background:transparent!important;border-radius:0!important;min-height:39px;padding:6px 13px!important;font-weight:500;font-size:13px;color:var(--af-ui-gray)}
 .workspace .filter.active{border-bottom:3px solid var(--af-ui-blue)!important;color:var(--af-ui-blue)!important;box-shadow:none!important}
 .workspace .sidebar .chat-row{min-height:79px!important;padding:10px 14px!important}
 .workspace .sidebar .chat-row.active{background:var(--af-ui-menu)!important;color:var(--af-ui-black)!important}
 .workspace .sidebar .chat-row.active .chat-name{color:var(--af-ui-black)!important}
 .workspace .sidebar .chat-row.active .chat-snippet,.workspace .sidebar .chat-row.active time{color:var(--af-ui-gray)!important}
 .workspace .main-pane{background:var(--af-ui-chat)!important;top:0!important}
 .workspace .chat-header{padding:7px 9px!important;height:62px!important}
 .workspace .chat-header h2{font-size:15px!important}
 .workspace .messages{padding:80px 8px calc(88px + env(safe-area-inset-bottom))!important}
 .workspace .message .bubble{max-width:87vw!important;padding:8px 11px 6px!important}
 .workspace .composer-area{padding:6px 7px calc(7px + env(safe-area-inset-bottom))!important}
 .workspace .composer{min-height:49px;border-radius:23px!important}
 .workspace .mobile-nav{position:absolute!important;bottom:0!important;left:0!important;right:0!important;height:calc(61px + env(safe-area-inset-bottom))!important;border-radius:0!important;box-shadow:none!important;padding-bottom:env(safe-area-inset-bottom)!important}
 .workspace .new-chat-fab{bottom:calc(80px + env(safe-area-inset-bottom))!important}
 .workspace .view-page:has(.settings-grid),.workspace .view-page.privacy-page{padding:0 0 24px!important}
 .workspace .settings-grid{max-width:none}
 .workspace .view-page:has(.settings-grid) .view-title,.workspace .view-page.privacy-page .view-title{min-height:72px;padding:13px 20px!important;margin-bottom:0!important}
 .workspace .view-page:has(.settings-grid) .view-title h2,.workspace .view-page.privacy-page .view-title h2{font-size:22px!important}
 .workspace .view-page:has(.settings-grid) .card,.workspace .view-page.privacy-page .card{margin:11px 13px 18px!important;border-radius:23px!important;padding:7px 17px!important}
 .workspace .af-settings-container{max-width:none}
 .workspace .af-settings-header{height:72px;min-height:72px;padding:9px 21px;gap:19px}
 .workspace .af-settings-header h2{font-size:21px}
 .workspace .af-settings-content{padding:0 13px 27px}
 .workspace .af-settings-card{border-radius:23px!important;padding:7px 18px!important;margin-bottom:18px!important}
 .workspace .af-settings-card h3{padding:13px 5px 4px!important}
 .workspace .af-setting-item,.workspace .af-switch-row,.workspace .af-language-row,.workspace .af-folder-line{min-height:66px;padding:13px 5px!important;gap:14px;font-size:16px}
 .workspace .af-settings-note{padding:0 21px 17px}
 .workspace .appearance-page{padding:0 0 25px!important}
 .workspace .appearance-page .theme-card{margin:12px 13px!important}
 .modal.glass{max-height:92dvh!important}
}
@media (prefers-reduced-motion: reduce){.workspace *, .workspace *::before, .workspace *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Privacy settings are server-backed, with the same visual hierarchy as the reference. */
.workspace .view-page.privacy-page .af-privacy-card>.section-caption{padding:12px 8px 6px!important}
.workspace .view-page.privacy-page .af-privacy-card .setting-row{min-height:70px;padding:12px 7px;border-bottom:1px solid var(--af-ui-rule);color:var(--af-ui-black)}
.workspace .view-page.privacy-page .af-privacy-card .setting-icon{background:transparent!important;color:var(--af-ui-black)!important;width:30px;height:30px;padding:0}
.workspace .view-page.privacy-page .af-privacy-card .setting-icon svg{width:24px;height:24px}
.workspace .view-page.privacy-page .af-privacy-card .setting-row b{font-size:16px;font-weight:450}
.workspace .view-page.privacy-page .af-privacy-card .privacy-row{display:flex;align-items:center;justify-content:space-between;font-size:16px;padding:15px 8px!important;min-height:68px}
.workspace .view-page.privacy-page .af-privacy-card .privacy-row b{font-weight:450;color:var(--af-ui-black)}
.workspace .view-page.privacy-page .af-privacy-card .privacy-row:last-child{border:0}
.workspace .view-page.privacy-page .af-privacy-card input[role=switch]{accent-color:var(--af-ui-blue);width:40px;height:24px}