/* StarGram interface refinement: Telegram-inspired ergonomics with its own yellow identity. */
:root{--sg-yellow:#f5b800;--sg-yellow-soft:#fff6d9;--sg-border:#e8e8e8;--sg-muted:#8b929a;--sg-bg:#fff;--sg-hover:#f4f4f4;--sg-out:#fff4cc;--sg-chat-bg:#f4f0e4}
body{background:var(--sg-bg);color:#222;font-family:Roboto,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.sidebar{width:360px;max-width:42vw;border-right:1px solid var(--sg-border);background:#fff}
.sidebar-brand{height:52px;padding:8px 18px 4px;gap:10px}.sidebar-brand .wordmark{font-size:20px;letter-spacing:-.45px;color:#262626}.sidebar-brand .wordmark img{width:29px;height:29px}
.side-top{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;align-items:center;padding:8px 12px 10px;background:#fff}
#btnMenu,.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#70777f;transition:background .15s}
#btnMenu:hover,.icon-btn:hover{background:#f0f1f2}
.search-wrap{height:40px;display:flex;align-items:center;gap:9px;padding:0 13px;background:#f1f2f3;border:1px solid transparent;border-radius:22px;box-shadow:none}
.search-wrap:focus-within{background:#fff;border-color:#e8c64d;box-shadow:0 0 0 2px #f5b80018}
.search-wrap input{font-size:14px;color:#222}.search-wrap input::placeholder{color:#8b929a}
.chat-filters{padding:0 13px;gap:17px;border-bottom:1px solid #eee;overflow-x:auto;scrollbar-width:none}.chat-filters::-webkit-scrollbar{display:none}
.chat-filters button{padding:12px 3px 11px;font-size:13px;font-weight:600;color:#737b83}.chat-filters button.selected{color:#a77c00}.chat-filters button.selected:after{height:3px;background:var(--sg-yellow);border-radius:3px 3px 0 0}
.side-body{background:#fff}.chat-list{padding:3px 5px}
.chat-item{position:relative;display:flex;align-items:center;gap:11px;min-height:72px;margin:1px 0;padding:9px 10px;border-radius:11px;transition:background .12s ease;cursor:pointer}
.chat-item:not(.active):hover{background:#f4f5f6}.chat-item.active{background:#fff3c4;box-shadow:none}
.chat-item.active .ci-title,.chat-item.active .ci-last,.chat-item.active .ci-time,.chat-item.active .ci-last b,.chat-item.active .verified{color:inherit}
.chat-item.active .ci-title{color:#292929}.chat-item.active .ci-last{color:#68645a}.chat-item.active .ci-time{color:#857b5e}.chat-item.active .badge{background:#e6ad00;color:#fff}
.chat-item .ci-title{font-size:14px;font-weight:600;color:#222;line-height:1.3}.chat-item .ci-last{font-size:13px;line-height:1.35;color:#7c858e;margin-top:4px}.chat-item .ci-time{font-size:11px;color:#9299a1}.chat-item .ci-avatar,.chat-item .avatar{flex-shrink:0}
.badge{min-width:20px;height:20px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;background:#e6ad00;color:white;font-size:11px;font-weight:700;border-radius:12px;box-shadow:none}
.main{background:var(--sg-chat-bg)}.chat-header,#mainPane .chat-header{height:60px;min-height:60px;padding:0 18px;background:#fff;border-bottom:1px solid #ededed;box-shadow:none}
.chat-header .title,.chat-header h2{font-size:15px;font-weight:650;color:#222}.chat-header .subtitle,.chat-header small{font-size:12px;color:#8b929a}
.chat-bg{background-color:#f4f0e4}.chat-bg-dots{background-image:radial-gradient(#d5c9a8 0.75px,transparent .9px);background-size:22px 22px;opacity:.18}
.message-list,.messages{padding:14px clamp(12px,3vw,36px) 18px}
.bubble{max-width:min(72%,580px);padding:8px 11px 5px;border-radius:12px;background:#fff;color:#222;box-shadow:0 1px 1px #0000000b;font-size:14px;line-height:1.42;overflow-wrap:anywhere}
.bubble.out,.bubble.outgoing,.message.outgoing .bubble{background:#fff0b8;border-radius:12px 12px 3px 12px}.bubble:not(.out):not(.outgoing){border-radius:12px 12px 12px 3px}
.bubble time,.bubble .time{font-size:10px;color:#929080}.day-sep{background:#d8d0b8cc;color:#625d4f;font-size:12px;font-weight:500;border-radius:12px;padding:4px 11px;box-shadow:none}
.composer{padding:8px 14px max(12px,env(safe-area-inset-bottom));background:linear-gradient(transparent,#f4f0e4 18%)}.input-wrap{min-height:48px;border:0;background:#fff;border-radius:24px;box-shadow:0 1px 3px #00000012;padding:3px 5px}.input-wrap:focus-within{box-shadow:0 1px 3px #00000012,0 0 0 1px #e9c84e}
#msgInput{font-size:14px;padding-top:11px;padding-bottom:11px;color:#222}#msgInput::placeholder{color:#9399a0}.send-btn{width:44px;height:44px;min-width:44px;border-radius:50%;background:#e8b000;color:#fff;box-shadow:none}.send-btn:hover{background:#d5a000}
.pop-menu,.rightpanel,.modal,.modal-card{border:1px solid #e9e9e9;border-radius:14px;background:#fff;box-shadow:0 8px 28px #0000001c;color:#222}.pop-item{min-height:42px;padding:10px 14px;font-size:14px;color:#262626;border-radius:8px}.pop-item:hover{background:#f5f5f5}.pop-item svg{color:#8a8f95}
.fab{width:54px;height:54px;right:18px;bottom:18px;border-radius:50%;background:#e9b000;color:#fff;box-shadow:0 3px 12px #a883002e}.fab:hover{background:#d5a000}
.welcome{gap:14px}.welcome p{background:#d8d0b8cc;color:#625d4f;border-radius:14px;box-shadow:none;font-size:13px}
.toast{background:#30343a;color:#fff;border-radius:12px}
/* Familiar Telegram-like compact mobile layout */
@media(max-width:800px){.sidebar{width:100%;max-width:none;border-right:0}.sidebar-brand{height:48px;padding:6px 16px 2px}.side-top{padding:7px 10px 9px}.chat-item{min-height:70px;padding:8px 9px}.chat-header,#mainPane .chat-header{height:56px;min-height:56px;padding:0 12px}.bubble{max-width:84%}.composer{padding-left:8px;padding-right:8px}.chat-filters{gap:15px}}
@media(prefers-color-scheme:dark){html[data-sgTheme="system"] body{background:#fff}}
html[data-sgTheme="dark"]{--sg-border:#30343a;--sg-hover:#2b2f33}
html[data-sgTheme="dark"] body,html[data-sgTheme="dark"] .sidebar,html[data-sgTheme="dark"] .side-top,html[data-sgTheme="dark"] .chat-filters,html[data-sgTheme="dark"] .side-body,html[data-sgTheme="dark"] .chat-header,html[data-sgTheme="dark"] #mainPane .chat-header{background:#212326;color:#e7e9eb}
html[data-sgTheme="dark"] .sidebar{border-color:#34373b}html[data-sgTheme="dark"] .sidebar-brand .wordmark,html[data-sgTheme="dark"] .chat-item .ci-title,html[data-sgTheme="dark"] .chat-header .title,html[data-sgTheme="dark"] .chat-header h2{color:#f1f1f1}
html[data-sgTheme="dark"] .search-wrap{background:#303338}html[data-sgTheme="dark"] .search-wrap input{color:#eee}html[data-sgTheme="dark"] .chat-item:not(.active):hover{background:#2b2e32}html[data-sgTheme="dark"] .chat-item.active{background:#594a20}html[data-sgTheme="dark"] .chat-item.active .ci-title{color:#fff}html[data-sgTheme="dark"] .chat-item.active .ci-last,html[data-sgTheme="dark"] .chat-item.active .ci-time{color:#e4d8ad}
html[data-sgTheme="dark"] .main,html[data-sgTheme="dark"] .chat-bg,html[data-sgTheme="dark"] .chat-bg-dots{background-color:#17191b}html[data-sgTheme="dark"] .chat-bg-dots{opacity:.08}html[data-sgTheme="dark"] .bubble{background:#292d31;color:#eee}html[data-sgTheme="dark"] .bubble.out,html[data-sgTheme="dark"] .bubble.outgoing,html[data-sgTheme="dark"] .message.outgoing .bubble{background:#51451f;color:#fff}html[data-sgTheme="dark"] .composer{background:linear-gradient(transparent,#17191b 18%)}html[data-sgTheme="dark"] .input-wrap{background:#292d31}html[data-sgTheme="dark"] #msgInput{color:#eee}html[data-sgTheme="dark"] .pop-menu,html[data-sgTheme="dark"] .rightpanel,html[data-sgTheme="dark"] .modal,html[data-sgTheme="dark"] .modal-card{background:#24272b;color:#eee;border-color:#3a3d42}html[data-sgTheme="dark"] .pop-item{color:#eee}html[data-sgTheme="dark"] .pop-item:hover{background:#303338}
/* Search result focus, accessible and consistent with StarGram's amber accent. */
.bubble.sg-search-hit{outline:2px solid var(--accent,#f5b800);outline-offset:3px;animation:sgHit 1.8s ease-out}
@keyframes sgHit{0%,35%{box-shadow:0 0 0 6px rgba(245,184,0,.22)}100%{box-shadow:0 0 0 0 rgba(245,184,0,0)}}