/* CrewW Chat’s compact, mobile-first inbox and story polish. */
:root{--dm-font:13px}
.theme-light .dm-inbox,.theme-light .notes-rail,.theme-light .ig-story-viewer{--dm-glass:rgba(255,255,255,.83);--dm-glass-line:rgba(40,30,60,.12)}
.dm-inbox{font-size:13px;letter-spacing:-.01em}
.notes-rail{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:4px 2px 12px;scrollbar-width:none;overscroll-behavior-x:contain}
.notes-rail::-webkit-scrollbar{display:none}
.note-person{width:64px;min-width:64px;position:relative;border:0;background:none;padding:22px 1px 0;display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--text);font-size:11px;text-align:center}
.note-person .avatar{width:53px;height:53px;border:2px solid #fff;box-shadow:0 0 0 2px #a66aff}
.note-person .note-bubble{position:absolute;top:0;left:0;right:0;z-index:2;min-height:28px;max-height:37px;padding:4px 5px;border-radius:11px;background:#fff;color:#343044;font-size:9px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;box-shadow:0 2px 12px #0002}
.note-person .note-bubble:after{content:"";position:absolute;left:13px;bottom:-5px;width:9px;height:9px;transform:rotate(45deg);background:inherit}
.note-person .note-add{position:absolute;right:1px;bottom:16px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#1378ee;color:white;border:2px solid var(--bg);font-size:13px;font-weight:700}
.notes-title{padding:2px 4px 6px;font-size:12px;color:var(--muted);font-weight:650}
.note-modal-text{font-size:17px;line-height:1.4;overflow-wrap:anywhere;padding:16px 4px}
.chat-shell.dm-inbox{border-radius:16px;background:var(--dm-glass,rgba(24,23,34,.70));border-color:var(--dm-glass-line,var(--line));box-shadow:0 10px 35px #00000012}
.dm-inbox .chat-list{padding:13px 12px;gap:7px}
.dm-inbox .chat-list-head h2{font-size:18px;letter-spacing:-.45px}
.dm-inbox .chat-list-head .muted{font-size:11px}
.dm-inbox .chat-list-search{padding:9px 12px;border-radius:12px;font-size:12px}
.dm-inbox .chat-filters{padding:0 2px}
.dm-inbox .chat-filter{font-size:11px;padding:7px 12px}
.dm-inbox .chat-row{min-height:62px;padding:8px 7px;border-radius:13px}
.dm-inbox .chat-row .avatar{width:44px;height:44px}
.dm-inbox .chat-summary strong{font-size:12.5px;font-weight:650}
.dm-inbox .chat-preview{font-size:11px;max-width:225px}
.dm-inbox .chat-kind{font-size:9px;opacity:.68}
.dm-inbox .chat-row .online-dot{width:8px;height:8px}
.chat-row .unread-count{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#2585f4;color:white;font-size:10px;display:grid;place-items:center}
.dm-inbox .chat-list-actions button{font-size:11px;padding:8px 5px;border-radius:12px}
.dm-inbox .chat-heading{min-height:58px;padding:8px 13px;gap:9px}
.dm-inbox .chat-heading .avatar{width:37px;height:37px}
.dm-inbox .chat-heading strong{font-size:13px}
.dm-inbox .chat-peer-subtitle{font-size:10px!important}
.dm-inbox .chat-heading .icon-btn{width:35px;height:35px;border-radius:50%;font-size:16px}
.dm-inbox .messages-scroll{gap:7px;padding:13px max(12px,4%)}
.dm-inbox .bubble{font-size:13px;max-width:min(78%,440px);padding:8px 11px;border-radius:19px}
.dm-inbox .bubble-tools{font-size:10px;align-items:center}
.dm-inbox .chat-compose-row .field{font-size:13px;min-height:40px;padding:9px 13px}
.dm-inbox .chat-attach{width:39px;height:39px;font-size:19px}
.dm-inbox .chat-send{min-height:39px;min-width:53px;font-size:12px}
.typing-indicator{display:inline-flex;gap:3px;vertical-align:middle;margin-left:4px}
.typing-indicator i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:dmTyping .75s ease-in-out infinite alternate}
.typing-indicator i:nth-child(2){animation-delay:.18s}.typing-indicator i:nth-child(3){animation-delay:.36s}
@keyframes dmTyping{to{opacity:.35;transform:translateY(-3px)}}
.group-typing-row{display:flex;align-items:center;gap:8px;align-self:flex-start;max-width:82%;padding:2px 4px;margin:3px 0 2px;animation:dmMessageIn .18s ease-out both}
.group-typing-avatars{display:flex;align-items:center;padding-left:2px}
.group-typing-avatars .avatar{width:25px;height:25px;margin-left:-5px;border:2px solid var(--bg);box-shadow:0 1px 4px #0002}
.group-typing-avatars .avatar:first-child{margin-left:0}
.group-typing-label{display:flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid var(--line);border-radius:15px;background:var(--surface,rgba(255,255,255,.08));color:var(--muted);font-size:10.5px;line-height:1.25}
.group-typing-label strong{font-weight:550}
.group-typing-label .typing-indicator{color:var(--accent,#a66aff)}
.theme-light .group-typing-label{background:#fff;color:#746c80;border-color:#33204412}
.bubble{animation:dmMessageIn .18s ease-out both}
@keyframes dmMessageIn{from{opacity:0;transform:translateY(5px) scale(.985)}to{opacity:1;transform:none}}
.message-receipt{display:block;text-align:right;color:var(--muted);font-size:9px;line-height:1.2;margin-top:3px;padding-right:3px}
.bubble.mine .message-receipt{color:#f4dcff}
.story-viewer-backdrop{padding:0!important;background:#07070bef!important;backdrop-filter:blur(16px)}
#modalContent:has(.ig-story-viewer){width:min(430px,100vw);height:min(850px,100dvh);max-height:100dvh;padding:0;border:0;border-radius:22px;background:#101018;overflow:hidden;box-shadow:0 25px 90px #000a}
.ig-story-viewer{position:relative;width:100%;height:100%;overflow:hidden;background:#08080c;color:white;isolation:isolate}
.ig-story-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#09090f}
.ig-story-shade{position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(180deg,#08080c99,transparent 28%,transparent 62%,#08080c99)}
.ig-story-top{position:absolute;z-index:3;left:12px;right:12px;top:max(9px,env(safe-area-inset-top));display:grid;gap:10px}
.ig-story-progress{display:flex;gap:3px}.ig-story-segment{height:2px;flex:1;background:#ffffff66;border-radius:5px;overflow:hidden}.ig-story-segment span{display:block;height:100%;width:0;background:#fff}
.ig-story-user{display:flex;align-items:center;gap:9px;min-width:0;font-size:12px}.ig-story-user .avatar{width:33px;height:33px;border:1px solid #ffffff9c}
.ig-story-user strong{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-story-controls{margin-left:auto;display:flex;gap:4px}.ig-story-controls button{width:34px;height:34px;border:0;border-radius:50%;background:#0004;color:white;font-size:18px}
.ig-story-caption{position:absolute;z-index:3;left:16px;right:16px;bottom:calc(74px + env(safe-area-inset-bottom));text-align:center;font-size:15px;text-shadow:0 1px 10px #000;overflow-wrap:anywhere}
.ig-story-reply{position:absolute;z-index:3;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));display:flex;gap:8px}
.ig-story-reply input{height:42px;border-radius:22px;background:#0003;border-color:#ffffff9e;color:white;font-size:12px}
.ig-story-reply button{width:42px;height:42px;border:0;background:none;color:white;font-size:21px}
.ig-story-hit{position:absolute;z-index:2;top:70px;bottom:70px;width:34%;border:0;background:transparent}.ig-story-hit.prev{left:0}.ig-story-hit.next{right:0}
.ig-story-owner-actions{position:absolute;z-index:3;right:13px;bottom:65px}
@media(max-width:760px){body{font-size:14px}.app{padding-left:10px;padding-right:10px}.topbar{height:58px}.brand{font-size:16px}.brand-mark{width:30px;height:30px;border-radius:11px}.top-actions .desktop-only{display:inline-flex!important;width:35px;height:35px;font-size:15px}.layout:has(.chat-shell){padding-top:3px;padding-bottom:calc(76px + env(safe-area-inset-bottom))}.layout:has(.chat-shell) .page-title{margin:2px 4px 8px}.layout:has(.chat-shell) .page-title h1{font-size:21px}.layout:has(.chat-shell) .page-title p{font-size:11px}.chat-shell.dm-inbox{height:calc(100dvh - 164px - env(safe-area-inset-bottom));min-height:300px;border-radius:14px}.dm-inbox .chat-list{padding:8px 9px}.dm-inbox .chat-row{min-height:58px}.dm-inbox .chat-heading{min-height:54px}.dm-inbox .messages-scroll{padding:11px 10px}.dm-inbox .bubble{font-size:12.5px;padding:7px 10px}.chat-open-mobile .layout:has(.chat-shell) .page-title{display:none}.chat-open-mobile .chat-shell.dm-inbox{height:calc(100dvh - 116px - env(safe-area-inset-bottom));min-height:0}.chat-open-mobile .layout:has(.chat-shell){padding:0 0 calc(60px + env(safe-area-inset-bottom))}.chat-open-mobile .bottom-nav{display:none}.ig-story-viewer{height:100dvh}.story-viewer{background:transparent}}
@media(max-width:380px){.dm-inbox .chat-kind{display:none}.dm-inbox .chat-list-actions button{font-size:10px}.notes-rail{gap:8px}}
@media(prefers-reduced-motion:reduce){.bubble,.typing-indicator i,.group-typing-row{animation:none}}
.story-create .story-ring{position:relative;display:grid;place-items:center}.story-create .story-ring .avatar{width:100%;height:100%;border-width:3px}.story-create .story-ring i{position:absolute;right:-1px;bottom:-1px;width:22px;height:22px;display:grid;place-items:center;border:2px solid var(--bg);border-radius:50%;background:#1677f2;color:white;font-style:normal;font-size:17px}.story-ring.story-seen{background:linear-gradient(145deg,#9a98a5,#777482)}.story-strip-modern{align-items:flex-start;gap:10px;padding:12px 8px}.ig-story-viewer .ig-story-user .avatar{object-fit:cover}.typing-active{color:var(--text)!important}
.theme-light .dm-inbox{--dm-glass:rgba(255,255,255,.88);--dm-glass-line:rgba(40,30,60,.12);color:var(--text)}.theme-light .dm-inbox .chat-list,.theme-light .dm-inbox .chat-window{background:rgba(255,255,255,.48)}.theme-light .dm-inbox .chat-heading,.theme-light .dm-inbox .chat-composer{background:rgba(255,255,255,.88);border-color:var(--line)}.theme-light .dm-inbox .bubble:not(.mine){background:#fff;color:#292337;border:1px solid #33204410;box-shadow:0 2px 12px #3e2a5612}.theme-light .dm-inbox .bubble.mine{color:white}.theme-light .dm-inbox .chat-list{border-color:var(--line)}.theme-light .dm-inbox .chat-row:hover,.theme-light .dm-inbox .chat-row.selected{background:#9b7aff12;border-color:#9b7aff22}.theme-light .dm-inbox .message-receipt{color:#6f657d}.theme-light .dm-inbox .bubble.mine .message-receipt{color:#fff0ff}

/* Mobile home feed and DM inbox, tailored to the supplied layout references. */
.dm-mobile-header,.dm-messages-title{display:none}
.mobile-create-top{display:none}
@media(max-width:760px){
  body:has(#storyStrip){--bg:#080b0e;--panel:#111419;--text:#f5f6f8;--muted:#a9adb4;--line:#ffffff12}
  body:has(#storyStrip):before,body:has(#storyStrip):after{display:none}
  body:has(#storyStrip) .topbar{height:59px;padding:0 15px;gap:8px;background:#080b0ef5;border:0;box-shadow:none}
  body:has(#storyStrip) .brand{font-size:19px;letter-spacing:-.7px}
  body:has(#storyStrip) .brand-mark{width:31px;height:31px;border-radius:11px}
  body:has(#storyStrip) .top-search{display:none}
  body:has(#storyStrip) .top-actions{margin-left:auto;gap:6px}
  body:has(#storyStrip) .top-actions .desktop-only,body:has(#storyStrip) .top-actions>.avatar,body:has(#storyStrip) .top-actions>.fallback{display:none!important}
  .mobile-create-top{display:inline-flex;width:37px;height:37px;border:0;background:transparent;font-size:24px}
  body:has(#storyStrip) .layout{padding:0 0 calc(84px + env(safe-area-inset-bottom))}
  body:has(#storyStrip) .layout>.main,body:has(#storyStrip) #main{width:100%;min-width:0}
  body:has(#storyStrip) .composer{display:none}
  body:has(#storyStrip) .stories{gap:12px;padding:10px 12px 12px;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  body:has(#storyStrip) .story-button{width:68px;min-width:68px;font-size:10px;color:#e5e7eb}
  body:has(#storyStrip) .story-ring{width:62px;height:62px;padding:3px;margin-bottom:4px}
  body:has(#storyStrip) .story-ring .avatar{border-color:#080b0e}
  body:has(#storyStrip) .feed-card{margin:0 0 8px;border:0;border-bottom:1px solid #ffffff14;border-radius:0;background:transparent;box-shadow:none}
  body:has(#storyStrip) .feed-card-head{padding:9px 13px}
  body:has(#storyStrip) .post-media-wrap{max-height:none;aspect-ratio:4/5}
  body:has(#storyStrip) .post-media{width:100%;height:100%;max-height:none;object-fit:cover}
  body:has(#storyStrip) .post-copy{padding:8px 12px 13px}
  body:has(#storyStrip) .post-tool{padding:5px 7px;font-size:21px}
  .bottom-nav{position:fixed;z-index:45;left:14px;right:14px;bottom:calc(9px + env(safe-area-inset-bottom));width:auto;min-height:57px;display:flex;align-items:center;justify-content:space-around;padding:5px 8px;border:1px solid #ffffff20;border-radius:32px;background:rgba(28,30,35,.78);box-shadow:0 10px 34px #0008;backdrop-filter:blur(24px) saturate(155%);-webkit-backdrop-filter:blur(24px) saturate(155%)}
  .bottom-nav button{width:44px;height:44px;border-radius:50%;font-size:21px;color:#f5f6f8}
  .bottom-nav button.active{background:#ffffff25}
  .dm-mobile-header{height:55px;display:flex;align-items:center;gap:5px;padding:0 16px;background:#080b0e;color:#f6f7f8;font-size:19px}
  .dm-mobile-header strong{max-width:calc(100% - 58px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dm-mobile-live{width:7px;height:7px;margin-right:auto;border-radius:50%;background:#f14768;box-shadow:0 0 10px #f1476870}
  .dm-mobile-header .icon-btn{width:38px;height:38px;border:0;background:transparent;font-size:21px}
  body:has(.chat-shell) .topbar{display:none}
  body:has(.chat-shell) .app{padding:0}
  body:has(.chat-shell) .layout:has(.chat-shell){padding:0 0 calc(78px + env(safe-area-inset-bottom))}
  body:has(.chat-shell) .layout:has(.chat-shell) .page-title{display:none}
  body:has(.chat-shell) .layout:has(.chat-shell)>.main{width:100%;min-width:0}
  body:has(.chat-shell) .chat-shell.dm-inbox{height:calc(100dvh - 119px - env(safe-area-inset-bottom));min-height:340px;border:0;border-radius:0;background:#080b0e;box-shadow:none}
  .dm-inbox .chat-list{gap:5px;padding:0;background:#080b0e;border:0}
  .dm-inbox .chat-list-head{display:none}
  .dm-inbox .chat-list-search{flex:0 0 auto;width:calc(100% - 30px);min-height:42px;margin:2px 15px 5px;padding:0 14px;border:0;border-radius:22px;background:#20242a;font-size:13px}
  .dm-inbox .dm-notes{flex:0 0 auto;padding:5px 13px 8px;border:0;border-bottom:1px solid #ffffff12;background:transparent}
  .dm-inbox .notes-title{padding:2px 2px 4px;color:#a9adb4;font-size:10px}
  .dm-inbox .notes-title .muted{display:none}
  .dm-inbox .notes-rail{gap:12px;padding:4px 0 2px}
  .dm-inbox .note-person{width:64px;min-width:64px;padding-top:20px;font-size:10px}
  .dm-inbox .note-person .avatar{width:50px;height:50px;box-shadow:none}
  .dm-inbox .note-person .note-bubble{background:#343a42;color:#f4f5f7;border:0;border-radius:13px;font-size:9px}
  .dm-inbox .chat-filters{flex:0 0 auto;display:flex;gap:7px;padding:7px 14px 5px}
  .dm-inbox .chat-filter{border:1px solid #ffffff17;border-radius:17px;background:#171b20;color:#e7e9ed;padding:6px 12px;font-size:10px}
  .dm-inbox .chat-filter.active{border-color:transparent;background:#e9eaec;color:#16181b}
  .dm-messages-title{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:5px 16px 3px;color:#f5f6f8}
  .dm-messages-title strong{font-size:14px}
  .dm-messages-title button{border:0;background:none;color:#aeb4bd;font-size:11px}
  .dm-inbox .conversation-rows{flex:1;gap:0;padding:0 8px 7px}
  .dm-inbox .chat-row{min-height:68px;padding:8px 9px;border:0;border-radius:12px;background:transparent}
  .dm-inbox .chat-row .avatar{width:51px;height:51px}
  .dm-inbox .chat-summary{display:grid;gap:3px}
  .dm-inbox .chat-summary strong{color:#f4f5f7;font-size:13px;font-weight:550}
  .dm-inbox .chat-preview{max-width:calc(100vw - 150px);color:#a8adb6;font-size:11px}
  .dm-inbox .chat-kind{margin-left:auto;color:#7e8792;font-size:8px}
  .dm-inbox .chat-list-actions{display:none}
  body.chat-open-mobile .dm-mobile-header{display:none}
  body.chat-open-mobile .app{height:100dvh;padding:0;overflow:hidden}
  body.chat-open-mobile .layout:has(.chat-shell){height:100%;padding:env(safe-area-inset-top) 0 0}
  body.chat-open-mobile .layout:has(.chat-shell)>.main{height:100%}
  body.chat-open-mobile .chat-shell.dm-inbox{height:100%;min-height:0}
  body.chat-open-mobile .bottom-nav{display:none}
}
@media(max-width:760px){
  body.theme-light:has(#storyStrip){--bg:#f4f4f6;--panel:#fff;--text:#202124;--muted:#72757d;--line:#20212418}
  body.theme-light:has(#storyStrip) .topbar{background:#f5f5f6f2}
  body.theme-light:has(#storyStrip) .story-button{color:#4f535a}
  body.theme-light:has(#storyStrip) .story-ring .avatar{border-color:#f4f4f6}
  body.theme-light:has(#storyStrip) .feed-card{border-bottom-color:#20212418}
  body.theme-light:has(#storyStrip) .bottom-nav{background:#ffffffe0;border-color:#20212420;box-shadow:0 8px 28px #1c1d2230}
  body.theme-light:has(#storyStrip) .bottom-nav button{color:#202124}
  body.theme-light:has(#storyStrip) .bottom-nav button.active{background:#20212415}
  body.theme-light:has(.chat-shell) .dm-mobile-header{background:#fff;color:#202124}
  body.theme-light:has(.chat-shell) .dm-inbox .chat-list{background:#fff}
  body.theme-light:has(.chat-shell) .dm-inbox .chat-list-search{background:#f0f1f3;color:#202124}
  body.theme-light:has(.chat-shell) .dm-inbox .chat-filter{background:#f1f2f4;color:#303238;border-color:#20212416}
  body.theme-light:has(.chat-shell) .dm-inbox .chat-filter.active{background:#292b30;color:#fff}
  body.theme-light:has(.chat-shell) .dm-messages-title{color:#202124}
  body.theme-light:has(.chat-shell) .dm-messages-title button{color:#676b73}
  body.theme-light:has(.chat-shell) .dm-inbox .chat-summary strong{color:#202124}
  body.theme-light:has(.chat-shell) .dm-inbox .chat-preview{color:#737780}
  body.theme-light:has(.chat-shell) .dm-inbox .chat-kind{color:#737780}
  body.theme-light:has(.chat-shell) .dm-inbox .dm-notes{border-bottom-color:#20212418}
}