/* Neutral app-only visual layer. White/soft-gray surfaces, charcoal text and
   restrained cold-blue interactions. Viewport measurement, hidden states and
   media ownership remain with the application and calls-video.css. */
:where(#app-shell) {
  --premium-ink: #192a2d;
  --premium-muted: #74838a;
  --premium-line: #edf0f1;
  --premium-accent: #7b7d80;
  --premium-accent-soft: #f3f5f8;
  background: #fff;
  color: var(--premium-ink);
}
:where(#app-shell) .main-content { background: #fff; }
:where(#app-shell) .sidebar { border-color: #eff0f2; box-shadow: none; }
:where(#app-shell) .brand { color: #223336; letter-spacing: -.055em; }
:where(#app-shell) .brand strong { color: #67696c; }
:where(#app-shell) .brand-mark { background: #7b7d80; box-shadow: 0 5px 14px #7b7d8018; }
:where(#app-shell) .sidebar-head p { color: #727477; }
:where(#app-shell) .nav-item { color: #6e7073; font-weight: 650; border-radius: 12px; }
:where(#app-shell) .nav-item:hover { background: #f6faf9; color: #636568; }
:where(#app-shell) .nav-item.active { background: #f4f5f7; color: #636568; }
:where(#app-shell) .nav-item.active::before { background: #7b7d80; }
:where(#app-shell) .nav-icon { display: inline-flex; align-items: center; justify-content: center; }
:where(#app-shell) .nav-icon svg { display: block; width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:where(#app-shell) .nav-count { background: #7b7d80; }
:where(#app-shell) .topbar { border-bottom: 1px solid #f0f2f3; padding-bottom: 21px; margin-bottom: 23px; }
:where(#app-shell) .topbar h1 { color: #1c292e; font-size: 25px; font-weight: 780; letter-spacing: -.045em; }
:where(#app-shell) .top-actions { gap: 10px; min-width: 0; }
:where(#app-shell) .health-badge { border: 1px solid #ebedf0; background: #f7f8fa; color: #636568; font-weight: 650; }
:where(#app-shell) .health-badge.health-off { border-color: #f4e4cd; background: #fff8ec; color: #a77636; }
:where(#app-shell) .health-badge.health-checking { background: #f6f8f8; border-color: #e8eeee; color: #6a6c6f; }
:where(#app-shell) .plan-top-chip { background: #f5f8f8; border-color: #e7eeee; color: #636568; }
:where(#app-shell) .avatar { overflow: hidden; }
:where(#app-shell) .avatar img { width: 100%; height: 100%; object-fit: cover; }
:where(#app-shell) .primary-button { background: #7b7d80; box-shadow: 0 5px 15px #7b7d8017; }
:where(#app-shell) .primary-button:hover { background: #6b6d70; box-shadow: 0 6px 18px #7b7d8024; }
:where(#app-shell) .secondary-button { background: #f4f5f7; color: #616366; }
:where(#app-shell) button:focus-visible,
:where(#app-shell) summary:focus-visible { outline: 2px solid #7b7d80; outline-offset: 3px; }

/* People-first community: actual profile pictures, language information and
   account labels are kept in their existing data-driven elements. */
:where(#app-shell) #view-discover .community-heading { margin-bottom: 22px; }
:where(#app-shell) #view-discover .community-heading h2 { color: #1b2b30; font-size: 29px; font-weight: 780; letter-spacing: -.045em; }
:where(#app-shell) #view-discover .community-heading p { color: #6e7073; }
:where(#app-shell) #view-discover .community-overline { color: #67696c; letter-spacing: .16em; font-size: 10px; }
:where(#app-shell) #view-discover .community-heading-mark { border-color: #ecedef; background: #f8f9fb; color: #67696c; }
:where(#app-shell) #view-discover .discover-search-form input { border-color: #e9eeee; background: #f7f9f9; border-radius: 12px; color: #2b3c43; }
:where(#app-shell) #view-discover .discover-search-form button { border-radius: 12px; background: #7b7d80; color: #fff; }
:where(#app-shell) #view-discover #discover-search-clear { background: #f4f7f7; color: #6e7073; }
:where(#app-shell) #view-discover .community-filter-panel { background: #fff; border-color: #e7eeee; border-radius: 12px; color: #636568; }
:where(#app-shell) #view-discover .community-modes { gap: 31px; border-color: #eeeff1; margin-top: 17px; }
:where(#app-shell) #view-discover .community-modes button { color: #6e7073; font-weight: 650; font-size: 14px; }
:where(#app-shell) #view-discover .community-modes button.active { color: #66686b; }
:where(#app-shell) #view-discover .community-modes button.active::after { background: #7a7c7f; height: 2px; }
:where(#app-shell) #view-discover .community-recommendation-section { border-color: #edf1f1; margin-top: 19px; padding-bottom: 16px; }
:where(#app-shell) #view-discover .community-strip-heading h3 { color: #26383e; font-weight: 720; font-size: 13px; }
:where(#app-shell) #view-discover .community-strip-heading p { color: #717376; }
:where(#app-shell) #view-discover .community-recommendations { gap: 20px; scrollbar-width: thin; scrollbar-color: #e3e5e8 transparent; }
:where(#app-shell) #view-discover .community-recommendation { flex-basis: 77px; gap: 4px; }
:where(#app-shell) #view-discover .community-strip-avatar { width: 61px; height: 61px; border: 3px solid #fff; box-shadow: 0 0 0 1px #e6e8eb; background: #f4f5f7; }
:where(#app-shell) #view-discover .community-recommendation strong { max-width: 77px; color: #34454b; font-size: 12px; font-weight: 650; }
:where(#app-shell) #view-discover .community-recommendation small { max-width: 77px; color: #707275; font-size: 10px; }
:where(#app-shell) #view-discover .community-results-heading { margin: 21px 0 12px; }
:where(#app-shell) #view-discover .community-results-heading h2 { color: #293b40; font-size: 16px; font-weight: 740; }
:where(#app-shell) #view-discover .heading-count { background: #f4f5f7; color: #66686b; padding: 3px 7px; font-size: 11px; border-radius: 6px; }
:where(#app-shell) #view-discover .heading-count.ai-count { background: #f2eef8; color: #88709f; }
:where(#app-shell) #view-discover .community-results-heading p { color: #717376; }
:where(#app-shell) #view-discover .community-people-list { border-color: #eff0f2; border-radius: 16px; }
:where(#app-shell) #view-discover .community-person-row { grid-template-columns: 82px minmax(0,1fr) 116px; gap: 18px; padding: 22px; border-color: #f0f2f3; }
:where(#app-shell) #view-discover .community-person-row:hover { background: #fafcfc; }
:where(#app-shell) #view-discover .community-avatar-button,
:where(#app-shell) #view-discover .community-person-avatar { width: 82px; height: 92px; border-radius: 15px; }
:where(#app-shell) #view-discover .community-name { color: #22353c; font-size: 18px; letter-spacing: -.025em; font-weight: 740; }
:where(#app-shell) #view-discover .community-person-location { color: #6e7073; }
:where(#app-shell) #view-discover .person-public-id { color: #737578; }
:where(#app-shell) #view-discover .community-languages { color: #67696c; font-size: 13px; font-weight: 650; }
:where(#app-shell) #view-discover .community-person-intro { color: #696b6e; font-size: 13px; line-height: 1.65; }
:where(#app-shell) #view-discover .community-person-interests { color: #9a9288; }
:where(#app-shell) #view-discover .community-level { background: #f5f8f7; border-color: #ecedef; color: #6f7174; font-size: 10px; border-radius: 5px; }
:where(#app-shell) #view-discover .community-person-actions { gap: 8px; }
:where(#app-shell) #view-discover .community-person-actions button { border-radius: 9px; font-weight: 650; min-height: 38px; padding: 8px 10px; }
:where(#app-shell) #view-discover .community-person-actions .community-message-button { border-color: #7b7d80; background: #7b7d80; color: #fff; }
:where(#app-shell) #view-discover .community-person-actions .community-message-button:hover { background: #6c6e71; }
:where(#app-shell) #view-discover .community-person-actions .person-secondary { color: #6c6e71; border-color: #ebecee; background: #fff; }
:where(#app-shell) #view-discover .community-secondary { border-color: #eeeff1; border-radius: 14px; box-shadow: none; }
:where(#app-shell) #view-discover .community-secondary > summary { color: #455c64; font-size: 13px; font-weight: 650; }

/* Message pages retain the existing measured scroll region and full-screen
   room mode. Only surfaces, typography and control treatment change. */
:where(#app-shell) #view-chats .chat-page-heading h2 { color: #25383f; letter-spacing: -.035em; }
:where(#app-shell) #view-chats .conversation-layout { border-color: #ecedef; box-shadow: 0 12px 36px #243e4e05; border-radius: 20px; }
:where(#app-shell) #view-chats .chat-list-pane { background: #fff; border-color: #eff0f2; }
:where(#app-shell) #view-chats .pane-title { border-color: #eff0f2; }
:where(#app-shell) #view-chats .pane-title h3 { color: #33454d; font-weight: 720; }
:where(#app-shell) #view-chats .sub-count { color: #696b6e; background: #f4f5f7; }
:where(#app-shell) #view-chats .chat-contact { border-color: #f2f4f5; }
:where(#app-shell) #view-chats .chat-contact.active { background: #f5f6f8; box-shadow: inset 3px 0 #828487; }
:where(#app-shell) #view-chats .chat-contact:hover { background: #f7faf9; }
:where(#app-shell) #view-chats .chat-contact .avatar { border-radius: 16px; }
:where(#app-shell) #view-chats .chat-contact-top strong { color: #2a3b43; font-weight: 700; }
:where(#app-shell) #view-chats .chat-contact-preview { color: #707275; }
:where(#app-shell) #view-chats .room-header { background: #fff; border-color: #f1f2f4; }
:where(#app-shell) #view-chats .room-header .avatar { border-radius: 50%; }
:where(#app-shell) #view-chats .room-person strong { color: #26383f; font-weight: 740; }
:where(#app-shell) #view-chats .room-person small { color: #737578; }
:where(#app-shell) #view-chats .chat-header-action { color: #6c6e71; }
:where(#app-shell) #view-chats .chat-header-action:hover { background: #f4f5f7; }
:where(#app-shell) #view-chats .message-thread { background: #fafcfd; }
:where(#app-shell) #view-chats .message-bubble { background: #eff0f2; color: #3d5262; border-color: transparent; box-shadow: none; border-radius: 18px 18px 18px 5px; }
:where(#app-shell) #view-chats .message-row.own .message-bubble { background: #4d9fe8; border-color: transparent; color: #fff; border-radius: 18px 18px 5px 18px; }
:where(#app-shell) #view-chats .message-row > .avatar { border-radius: 50%; }
:where(#app-shell) #view-chats .message-time { color: #76787b; }
:where(#app-shell) #view-chats .composer { border-color: #eff0f2; background: #fff; }
:where(#app-shell) #view-chats .chat-input-capsule { border-color: #eeeff1; background: #f5f6f8; }
:where(#app-shell) #view-chats .chat-input-capsule:focus-within { border-color: #bbd9ed; box-shadow: 0 0 0 3px #4e9fdf0c; }
:where(#app-shell) #view-chats .send-button { background: #4d9fe8; }
:where(#app-shell) #view-chats .send-button:hover { background: #348dd9; }

/* Companion remains clearly AI, with a light treatment and readable input. */
:where(#app-shell) #view-ai > .ai-banner { background: #f8f9fb; color: #36383b; border: 1px solid #edeff2; border-radius: 18px; padding: 18px 20px; gap: 14px; }
:where(#app-shell) #view-ai .ai-banner-icon { width: 47px; height: 47px; background: #eeeff1; color: #66686b; border-radius: 15px; }
:where(#app-shell) #view-ai .ai-banner .eyebrow { color: #6c6e71; font-size: 9px; letter-spacing: .14em; }
:where(#app-shell) #view-ai .ai-banner h2 { font-size: 18px; color: #3b3d40; line-height: 1.45; }
:where(#app-shell) #view-ai .ai-banner p:last-child { color: #707275; line-height: 1.6; }
:where(#app-shell) #view-ai .ai-banner-status { background: #fff; color: #696b6e; border-color: #e7e8ea; font-weight: 650; }
:where(#app-shell) #view-ai .ai-banner-status.off { color: #ac7e45; background: #fffaf1; border-color: #f1e5cf; }
:where(#app-shell) #view-ai .ai-tabs { gap: 13px; border-color: #eeeff1; margin-top: 16px; overflow-x: auto; scrollbar-width: none; }
:where(#app-shell) #view-ai .ai-tabs button { flex: none; color: #6f7174; font-weight: 650; white-space: nowrap; padding: 12px 10px; }
:where(#app-shell) #view-ai .ai-tabs button.active { color: #636568; border-bottom-color: #7b7d80; }
:where(#app-shell) #ai-chat-panel { border-color: #eeeff1; border-radius: 0 0 18px 18px; }
:where(#app-shell) #ai-chat-panel .ai-chat-head { padding: 16px 20px 11px; gap: 12px; }
:where(#app-shell) #ai-chat-panel .ai-chat-head h3 { font-size: 14px; color: #4a4c4f; font-weight: 720; }
:where(#app-shell) #ai-chat-panel .ai-chat-head p { color: #747679; line-height: 1.5; }
:where(#app-shell) #ai-chat-panel .mode-switch { border: 1px solid #ebedf0; background: #f6f9f7; padding: 3px; border-radius: 11px; flex: none; }
:where(#app-shell) #ai-chat-panel .mode-switch button { font-weight: 650; }
:where(#app-shell) #ai-chat-panel .mode-switch button.active { color: #636568; box-shadow: 0 2px 5px #383a3d08; }
:where(#app-shell) #ai-chat-panel .mode-description { color: #717376; padding-inline: 20px; line-height: 1.55; }
:where(#app-shell) #ai-chat-panel .ai-thread { border-color: #f1f5f2; background: #fbfdfc; }
:where(#app-shell) #ai-chat-panel .message-bubble { border-color: #f0f1f3; color: #4e5053; background: #fff; box-shadow: 0 3px 9px #40424503; border-radius: 17px 17px 17px 4px; line-height: 1.7; }
:where(#app-shell) #ai-chat-panel .message-row.own .message-bubble { background: #eff0f2; color: #595b5e; border-color: #e9eaec; border-radius: 17px 17px 4px 17px; }
:where(#app-shell) #ai-chat-panel .message-row > .avatar { border-radius: 10px; }
:where(#app-shell) #ai-chat-panel .ai-composer { border-color: #f0f1f3; padding: 12px 17px; gap: 8px; }
:where(#app-shell) #ai-chat-panel .ai-composer input { background: #f5f9f6; border-color: #edeef0; border-radius: 99px; font-size: 16px; padding: 12px 16px; }
:where(#app-shell) #ai-chat-panel .send-button { background: #7b7d80; border-radius: 50%; box-shadow: none; }
:where(#app-shell) #ai-chat-panel .composer-action { background: #f5f6f8; border-color: #ebecee; color: #6b6d70; border-radius: 12px; }
:where(#app-shell) #ai-chat-panel .ai-chat-foot { color: #75777a; gap: 12px; line-height: 1.6; padding-inline: 20px; }

/* Only the real video/call controls are styled: no placeholder photograph or
   pretend video surface is introduced when a camera stream is absent. */
#call-panel.call-panel { border: 1px solid #e8eaed; border-radius: 23px; background: #fff; box-shadow: 0 22px 75px #30323526; color: #37393c; }
#call-panel .call-heading strong { color: #333538; font-weight: 740; }
#call-panel #call-status { color: #707275; font-size: 12px; line-height: 1.6; }
#call-panel #call-video-stage { border-radius: 18px; border-color: #e6e7e9; background: #14232b; }
#call-panel #call-local-video { border: 2px solid #ffffffd9; box-shadow: 0 5px 18px #0003; border-radius: 12px; }
#call-panel #call-media-actions button { border: 1px solid #eaecef; border-radius: 13px; background: #f5f9f7; color: #626467; padding: 10px 16px; font-size: 12px; font-weight: 650; }
#call-panel #call-media-actions button[aria-pressed="true"] { color: #9f6a35; border-color: #efd7b8; background: #fff4e7; }
#call-panel #call-accept { background: #7f8184; border-color: transparent; color: #fff; border-radius: 13px; }
#call-panel #call-end,
#call-panel #call-reject { background: #ee6665; border-color: transparent; color: #fff; border-radius: 13px; }
#call-panel .call-network-note { color: #717376; font-size: 10px; line-height: 1.75; }

@media (min-width: 761px) {
  :where(#app-shell) .main-content { padding-top: 28px; }
}
@media (max-width: 1050px) and (min-width: 761px) {
  :where(#app-shell) #view-discover .community-person-row { grid-template-columns: 74px minmax(0,1fr); gap: 14px; padding: 19px; }
  :where(#app-shell) #view-discover .community-avatar-button,
  :where(#app-shell) #view-discover .community-person-avatar { width: 74px; height: 85px; }
  :where(#app-shell) #view-discover .community-person-actions { grid-column: 2; flex-direction: row; flex-wrap: wrap; }
  :where(#app-shell) #view-discover .community-person-actions button { width: auto; }
}
@media (max-width: 760px) {
  :where(#app-shell) .main-content { padding-inline: 16px; padding-top: 19px; }
  :where(#app-shell) .topbar { padding-bottom: 14px; margin-bottom: 17px; gap: 12px; align-items: center; }
  :where(#app-shell) .topbar h1 { font-size: 23px; line-height: 1.3; flex: 1; min-width: 0; overflow-wrap: anywhere; }
  :where(#app-shell) .top-actions { gap: 7px; flex-wrap: wrap; justify-content: flex-end; max-width: 48%; }
  :where(#app-shell) .health-badge { padding: 6px 8px; font-size: 9px; gap: 5px; white-space: normal; line-height: 1.4; }
  :where(#app-shell) .plan-top-chip { padding: 6px 8px; max-width: 100%; font-size: 9px; line-height: 1.4; white-space: normal; }
  :where(#app-shell) .top-actions .avatar-top { width: 33px; height: 33px; border-radius: 50%; }
  :where(#app-shell) .sidebar { background: #fffffffa; border-color: #edf1f1; box-shadow: 0 -3px 18px #34363904; }
  :where(#app-shell) .nav-item { padding-inline: 3px; padding-top: 7px; gap: 4px; border-radius: 0; background: transparent; font-size: 9px; line-height: 1.35; font-weight: 650; min-width: 0; }
  :where(#app-shell) .nav-item.active { color: #67696c; background: transparent; }
  :where(#app-shell) .nav-item > span:not(.nav-icon):not(.nav-count) { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  :where(#app-shell) .nav-icon { width: 24px; height: 24px; font-size: 23px; }
  :where(#app-shell) .nav-icon svg { width: 23px; height: 23px; }
  :where(#app-shell) #view-discover .community-modes { margin-top: 11px; gap: 15px; justify-content: space-between; }
  :where(#app-shell) #view-discover .community-modes button { font-size: 12px; padding-bottom: 10px; }
  :where(#app-shell) #view-discover .discover-search-form input { font-size: 12px; padding: 10px 11px; }
  :where(#app-shell) #view-discover .discover-search-form button { padding: 9px 12px; font-size: 12px; }
  :where(#app-shell) #view-discover .community-filter-panel summary { padding: 11px 10px; font-weight: 650; font-size: 11px; }
  :where(#app-shell) #view-discover .community-recommendation-section { margin-top: 14px; padding-bottom: 10px; }
  :where(#app-shell) #view-discover .community-recommendations { gap: 13px; padding-bottom: 5px; }
  :where(#app-shell) #view-discover .community-recommendation { flex-basis: 62px; gap: 3px; }
  :where(#app-shell) #view-discover .community-strip-avatar { width: 54px; height: 54px; border-width: 2px; }
  :where(#app-shell) #view-discover .community-recommendation strong { max-width: 62px; font-size: 11px; }
  :where(#app-shell) #view-discover .community-recommendation small { max-width: 62px; font-size: 9px; }
  :where(#app-shell) #view-discover .community-recommendation .community-strip-ai-badge { top: 39px; right: 0; }
  :where(#app-shell) #view-discover .community-strip-heading { margin-bottom: 11px; gap: 7px; }
  :where(#app-shell) #view-discover .community-strip-heading h3 { font-size: 12px; }
  :where(#app-shell) #view-discover .community-strip-heading p { font-size: 9px; }
  :where(#app-shell) #view-discover .community-results-heading { margin-top: 16px; margin-bottom: 10px; }
  :where(#app-shell) #view-discover .community-results-heading h2 { font-size: 14px; line-height: 1.6; }
  :where(#app-shell) #view-discover .community-people-list { border-radius: 13px; }
  :where(#app-shell) #view-discover .community-person-row { grid-template-columns: 61px minmax(0,1fr); column-gap: 12px; row-gap: 10px; padding: 15px 12px; }
  :where(#app-shell) #view-discover .community-avatar-button,
  :where(#app-shell) #view-discover .community-person-avatar { width: 61px; height: 75px; border-radius: 12px; }
  :where(#app-shell) #view-discover .community-name { font-size: 16px; line-height: 1.4; }
  :where(#app-shell) #view-discover .community-languages { font-size: 11px; line-height: 1.7; }
  :where(#app-shell) #view-discover .community-person-intro { font-size: 12px; line-height: 1.7; }
  :where(#app-shell) #view-discover .community-person-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0; }
  :where(#app-shell) #view-discover .community-person-actions button { flex: 0 1 auto; width: auto; font-size: 11px; padding: 6px 10px; min-height: 33px; }
  :where(#app-shell) #view-discover .community-person-actions .community-ai-cost { flex: 1 1 100px; min-width: 0; line-height: 1.5; }
  :where(#app-shell) #view-chats .conversation-layout { border-radius: 16px; }
  :where(#app-shell) #view-chats .conversation-layout.mobile-room-open { border-radius: 0; box-shadow: none; }
  :where(#app-shell) #view-chats .room-person strong { font-size: 16px; }
  :where(#app-shell) #view-chats .message-bubble { font-size: 16px; line-height: 1.6; }
  :where(#app-shell) #view-ai > .ai-banner { padding: 13px 14px; gap: 11px; border-radius: 15px; flex-wrap: wrap; }
  :where(#app-shell) #view-ai .ai-banner-icon { width: 37px; height: 37px; border-radius: 12px; font-size: 23px; }
  :where(#app-shell) #view-ai .ai-banner > div { flex: 1 1 200px; min-width: 0; }
  :where(#app-shell) #view-ai .ai-banner h2 { font-size: 16px; margin-bottom: 3px; }
  :where(#app-shell) #view-ai .ai-banner .eyebrow { font-size: 8px; letter-spacing: .11em; margin-bottom: 4px; }
  :where(#app-shell) #view-ai .ai-banner p:last-child { font-size: 10px; }
  :where(#app-shell) #view-ai .ai-banner-status { margin-inline-start: auto; font-size: 9px; padding: 5px 9px; }
  :where(#app-shell) #view-ai .ai-tabs { gap: 10px; margin-top: 11px; }
  :where(#app-shell) #view-ai .ai-tabs button { padding: 10px 7px; font-size: 11px; }
  :where(#app-shell) #ai-chat-panel .ai-chat-head { padding: 13px 14px 9px; gap: 9px; }
  :where(#app-shell) #ai-chat-panel .ai-chat-head > div:first-child { min-width: 0; }
  :where(#app-shell) #ai-chat-panel .ai-chat-head h3 { font-size: 13px; line-height: 1.5; }
  :where(#app-shell) #ai-chat-panel .ai-chat-head p { font-size: 10px; }
  :where(#app-shell) #ai-chat-panel .mode-switch button { padding: 6px 9px; font-size: 10px; }
  :where(#app-shell) #ai-chat-panel .mode-description { padding-inline: 14px; padding-bottom: 10px; font-size: 10px; }
  :where(#app-shell) #ai-chat-panel .ai-thread { padding: 19px 13px; gap: 14px; }
  :where(#app-shell) #ai-chat-panel .message-block { max-width: 89%; }
  :where(#app-shell) #ai-chat-panel .message-bubble { font-size: 14px; line-height: 1.75; padding: 11px 13px; }
  :where(#app-shell) #ai-chat-panel .ai-composer { padding-inline: 10px; gap: 6px; }
  :where(#app-shell) #ai-chat-panel .ai-composer input { padding-inline: 13px; }
  :where(#app-shell) #ai-chat-panel .composer-action { font-size: 10px; padding: 8px; white-space: normal; line-height: 1.4; }
  :where(#app-shell) #ai-chat-panel .send-button { width: 39px; height: 39px; }
  :where(#app-shell) #ai-chat-panel .ai-chat-foot { padding-inline: 13px; font-size: 9px; }
}
@media (max-width: 360px) {
  :where(#app-shell) .main-content { padding-inline: 12px; }
  :where(#app-shell) .topbar h1 { font-size: 21px; }
  :where(#app-shell) #view-discover .community-person-row { grid-template-columns: 54px minmax(0,1fr); gap: 9px; padding-inline: 10px; }
  :where(#app-shell) #view-discover .community-avatar-button,
  :where(#app-shell) #view-discover .community-person-avatar { width: 54px; height: 69px; }
  :where(#app-shell) #view-discover .community-modes { gap: 8px; }
  :where(#app-shell) #view-discover .community-modes button { font-size: 11px; }
  :where(#app-shell) #view-ai .ai-tabs { gap: 4px; }
}

/* Shared neutral palette also replaces legacy green surfaces outside the
   primary discovery/chat pages. Uploaded media keeps its original pixels. */
:where(#app-shell) {
  --premium-ink: #252a30;
  --premium-muted: #858b93;
  --premium-line: #eaedf0;
  --premium-accent: #647e98;
  --premium-accent-soft: #f0f3f7;
  color: #252a30;
  background: #fff;
  accent-color: #647e98;
}
:where(#app-shell) .brand,
:where(#app-shell) .brand strong { color: #323941; }
:where(#app-shell) .brand-mark { background: #414b57; box-shadow: 0 4px 12px #27334112; }
:where(#app-shell) .avatar,
:where(#app-shell) .avatar-top,
:where(#app-shell) .avatar-profile,
:where(#app-shell) .person-card .avatar,
:where(#app-shell) .person-card:nth-child(4n+2) .avatar,
:where(#app-shell) .person-card:nth-child(4n+3) .avatar,
:where(#app-shell) .person-card:nth-child(4n+4) .avatar { background: #eff0f2; color: #696b6e; box-shadow: none; }
:where(#app-shell) .eyebrow,
:where(#app-shell) .text-button,
:where(#app-shell) .public-site-link,
:where(#app-shell) .profile-public-links a { color: #686a6d; }
:where(#app-shell) .primary-button { background: #465563; color: #fff; box-shadow: none; }
:where(#app-shell) .primary-button:hover { background: #33414e; box-shadow: none; }
:where(#app-shell) .secondary-button,
:where(#app-shell) .hero-button,
:where(#app-shell) .social-button,
:where(#app-shell) .media-upload-button,
:where(#app-shell) .room-action,
:where(#app-shell) .composer-action { background: #f2f3f5; color: #636568; border-color: #e7e8ea; box-shadow: none; }
:where(#app-shell) .secondary-button:hover,
:where(#app-shell) .hero-button:hover,
:where(#app-shell) .media-upload-button:hover { background: #ebecee; }
:where(#app-shell) .room-action.danger,
:where(#app-shell) .composer-action.recording { background: #fff6f5; color: #b77a76; border-color: #f0dfdd; }
:where(#app-shell) button:focus-visible,
:where(#app-shell) summary:focus-visible { outline-color: #6d859e; }
:where(#app-shell) input:focus,
:where(#app-shell) textarea:focus,
:where(#app-shell) select:focus { box-shadow: 0 0 0 3px #657d9715; }
:where(#app-shell) .nav-item:hover { background: #f6f7f8; color: #646669; }
:where(#app-shell) .nav-item.active { background: #f2f3f5; color: #65676a; }
:where(#app-shell) .nav-item.active::before { background: #7c94ab; }
:where(#app-shell) .nav-count { background: #718aa3; }
:where(#app-shell) .main-nav .nav-item[data-view="posts"] .nav-icon { color: inherit; background: transparent; box-shadow: none; }
:where(#app-shell) .online-dot { background: #a5b2bf; }
:where(#app-shell) .sidebar-note { border-color: #eeeff1; background: #f8f9fa; }
:where(#app-shell) .sidebar-note > span { color: #737578; }
:where(#app-shell) .sidebar-note strong { color: #5e6063; }
:where(#app-shell) .sidebar-note p,
:where(#app-shell) .sidebar-person small { color: #727477; }
:where(#app-shell) .sidebar-person { border-color: #eff0f2; }
:where(#app-shell) .sidebar-plan-card { background: #f3f4f6; background-image: none; border: 1px solid #e6eaee; color: #495765; box-shadow: none; }
:where(#app-shell) .sidebar-plan-card:hover,
:where(#app-shell) .sidebar-plan-card.member,
:where(#app-shell) .sidebar-plan-card.member:hover { background: #f3f4f6; background-image: none; border: 1px solid #e6eaee; color: #495765; box-shadow: none; }
:where(#app-shell) .sidebar-plan-overline { color: #707275; }
:where(#app-shell) .sidebar-plan-card #sidebar-plan-remaining { color: #65676a; }
:where(#app-shell) .sidebar-plan-link { color: #6d6f72; }
:where(#app-shell) .health-badge { background: #f5f6f8; border-color: #e8e9eb; color: #6d6f72; }
:where(#app-shell) .plan-top-chip,
:where(#app-shell) .plan-top-chip.member,
:where(#app-shell) .plan-top-chip.trial { background: #f6f7f9; border-color: #eaebed; color: #696b6e; }
:where(#app-shell) .plan-card,
:where(#app-shell) .plan-card.member { background: #fafbfc; border-color: #eaebed; box-shadow: none; }
:where(#app-shell) .plan-card-top p:last-child,
:where(#app-shell) .plan-balance span,
:where(#app-shell) .plan-card-details p,
:where(#app-shell) .plan-admin-note,
:where(#app-shell) .plan-provider-status { color: #6e7073; }
:where(#app-shell) .plan-tag,
:where(#app-shell) .plan-card.member .plan-tag { background: #eff0f2; color: #6d6f72; }
:where(#app-shell) .plan-balance strong { color: #606265; }
:where(#app-shell) .plan-progress { background: #ebecee; }
:where(#app-shell) .plan-progress span { background: #9eafc0; }
:where(#app-shell) .plan-rights > div { background: #fff; border-color: #e9eaec; }
:where(#app-shell) .plan-rights strong { color: #646669; }
:where(#app-shell) .plan-rights span { color: #707275; }
:where(#app-shell) .subscription-product { border-color: #e9eaec; background: #f8f9fb; }
:where(#app-shell) .empty-state,
:where(#app-shell) .list-empty,
:where(#app-shell) .practice-empty,
:where(#app-shell) .learning-empty { border-color: #e3e4e6; background: #fff; color: #747679; }
:where(#app-shell) .empty-state strong,
:where(#app-shell) .room-empty h3 { color: #626467; }
:where(#app-shell) .empty-icon,
:where(#app-shell) .empty-art,
:where(#app-shell) .thread-empty span { color: #75777a; }
:where(#app-shell) .empty-art { background: #f2f3f5; }
:where(#app-shell) .thread-empty,
:where(#app-shell) .room-empty p { color: #727477; }

/* Community accents stay small: underline, text and compact action controls. */
:where(#app-shell) #view-discover { color: #30363d; }
:where(#app-shell) #view-discover .community-overline,
:where(#app-shell) #view-discover .community-heading p,
:where(#app-shell) #view-discover .discover-search-status { color: #707275; }
:where(#app-shell) #view-discover .community-heading-mark { background: #f7f8fa; border-color: #ecedef; color: #737578; }
:where(#app-shell) #view-discover .discover-search-form .primary-button { background: #596e83; color: #fff; }
:where(#app-shell) #view-discover .community-modes button.active { color: #66686b; }
:where(#app-shell) #view-discover .community-modes button.active::after { background: #7c94aa; }
:where(#app-shell) #view-discover .community-strip-avatar { background: #f1f2f4; box-shadow: 0 0 0 1px #e6ebef; }
:where(#app-shell) #view-discover .community-languages { color: #6a6c6f; }
:where(#app-shell) #view-discover .heading-count { color: #6f7174; background: #f3f4f6; }
:where(#app-shell) #view-discover .heading-count.ai-count { color: #8d879b; background: #f2eff7; }
:where(#app-shell) #view-discover .community-person-actions .community-message-button { background: #f3f4f6; border-color: #e8e9eb; color: #67696c; }
:where(#app-shell) #view-discover .community-person-actions .community-message-button:hover { background: #ecedef; }
:where(#app-shell) #view-discover .community-secondary .welcome-hero,
:where(#app-shell) .welcome-hero { background: #f6f7f9; color: #45525f; }
:where(#app-shell) .welcome-hero h2,
:where(#app-shell) .welcome-hero h2 em { color: #45525f; }
:where(#app-shell) .hero-kicker,
:where(#app-shell) .welcome-hero .hero-content > p:not(.hero-kicker) { color: #717376; }
:where(#app-shell) .hero-circle-a,
:where(#app-shell) .hero-circle-b { background: #ebecee; box-shadow: none; }
:where(#app-shell) .hero-circle span,
:where(#app-shell) .hero-circle-b span { color: #6d6f72; box-shadow: none; }
:where(#app-shell) .hero-star,
:where(#app-shell) .hero-spark { color: #848689; }
:where(#app-shell) .kicker-dot { background: #b8c5d2; }
:where(#app-shell) .social-filters label,
:where(#app-shell) .social-filters input,
:where(#app-shell) .social-filters select { color: #696b6e; border-color: #e9eaec; }
:where(#app-shell) .social-panel { border-color: #ebecee; }
:where(#app-shell) .social-panel h3 span { color: #6f7174; }
:where(#app-shell) .social-row-info small,
:where(#app-shell) .social-row-info .social-public-id,
:where(#app-shell) .social-pending,
:where(#app-shell) .social-empty { color: #747679; }
:where(#app-shell) .social-button.quiet,
:where(#app-shell) .person-actions .person-secondary { background: #f6f7f9; color: #737578; }
:where(#app-shell) .match-panel { background: #f9fafb; border-color: #eaebed; box-shadow: none; }
:where(#app-shell) .match-free-tag,
:where(#app-shell) .match-status,
:where(#app-shell) .match-status.is-matched,
:where(#app-shell) .match-reasons span { background: #f2f3f5; border-color: #e6e7e9; color: #6d6f72; }
:where(#app-shell) .match-controls label,
:where(#app-shell) .match-controls select,
:where(#app-shell) .match-result-person p { color: #6f7174; border-color: #e7e8ea; }
:where(#app-shell) .match-panel-head p:last-child,
:where(#app-shell) .match-mode-description,
:where(#app-shell) .match-privacy-note { color: #75777a; }
:where(#app-shell) .match-result-person .match-person-public-id { color: #707275; }

/* AI free chat, memories and structured scenario learning share the same
   white panels. No pale-green message or broad colored banner remains. */
:where(#app-shell) #view-ai > .ai-banner { background: #f6f7f9; color: #3d4854; border-color: #ebecee; }
:where(#app-shell) #view-ai .ai-banner-icon { background: #ecedef; color: #6e7073; }
:where(#app-shell) #view-ai .ai-banner h2 { color: #414b57; }
:where(#app-shell) #view-ai .ai-banner .eyebrow,
:where(#app-shell) #view-ai .ai-banner p:last-child { color: #737578; }
:where(#app-shell) #view-ai .ai-banner-status { color: #707275; border-color: #e6e7e9; }
:where(#app-shell) #view-ai .ai-tabs button.active { color: #67696c; border-bottom-color: #859cb3; }
:where(#app-shell) #ai-chat-panel .ai-chat-head h3 { color: #4d5864; }
:where(#app-shell) #ai-chat-panel .mode-switch { background: #f6f7f9; border-color: #ebecee; }
:where(#app-shell) #ai-chat-panel .mode-switch button.active { color: #696b6e; }
:where(#app-shell) #ai-chat-panel .ai-thread { background: #fafbfd; border-color: #f1f2f4; }
:where(#app-shell) #ai-chat-panel .message-bubble { background: #fff; color: #505d6b; border-color: #ecedef; box-shadow: none; }
:where(#app-shell) #ai-chat-panel .message-row.own .message-bubble { background: #f0f1f3; color: #65676a; border-color: #e9eaec; }
:where(#app-shell) #ai-chat-panel .ai-composer input { background: #f6f7f9; border-color: #ebecee; color: #606265; }
:where(#app-shell) #ai-chat-panel .ai-composer input::placeholder { color: #77797c; }
:where(#app-shell) #ai-chat-panel .composer-action { background: #f5f6f8; color: #717376; border-color: #eaebed; }
:where(#app-shell) #ai-chat-panel .send-button,
:where(#app-shell) #view-chats .send-button { background: #547493; }
:where(#app-shell) #ai-chat-panel .send-button:hover,
:where(#app-shell) #view-chats .send-button:hover { background: #456582; }
:where(#app-shell) #view-chats .message-row.own .message-bubble { background: #547493; color: #fff; }
:where(#app-shell) #view-chats .chat-contact.active { background: #f4f5f7; box-shadow: inset 3px 0 #91a5b9; }
:where(#app-shell) #view-chats .sub-count { background: #f2f3f5; color: #717376; }
:where(#app-shell) .ai-panel,
:where(#app-shell) .memory-item,
:where(#app-shell) .scene-list-card,
:where(#app-shell) .scene-create-card,
:where(#app-shell) .scene-workspace,
:where(#app-shell) .scene-turn-card { background: #fff; border-color: #ebecee; box-shadow: none; }
:where(#app-shell) .memory-intro { background: #f7f8fa; border-color: #ebecee; }
:where(#app-shell) .memory-intro-icon { background: #ecedef; color: #717376; }
:where(#app-shell) .memory-intro h3,
:where(#app-shell) .memory-intro strong,
:where(#app-shell) .memory-item-main { color: #636568; }
:where(#app-shell) .memory-intro p,
:where(#app-shell) .memory-heading p { color: #747679; }
:where(#app-shell) .memory-item-main strong { color: #6e7073; }
:where(#app-shell) .memory-column + .memory-column { border-color: #ebecee; }
:where(#app-shell) .memory-form textarea,
:where(#app-shell) .example-form textarea { background: #f8f9fb; border-color: #e9eaec; color: #65676a; }
:where(#app-shell) .example-form label { color: #6e7073; }
:where(#app-shell) .scene-banner { background: #f6f7f9; border: 1px solid #e7ecf1; color: #5e6063; }
:where(#app-shell) .scene-banner .eyebrow,
:where(#app-shell) .scene-banner p:last-child { color: #737578; }
:where(#app-shell) .scene-ai-status { background: #fff; border-color: #e6e7e9; color: #707275; }
:where(#app-shell) .scene-new-button,
:where(#app-shell) .scene-list-icon,
:where(#app-shell) .scene-play-button { background: #f2f3f5; color: #6f7174; }
:where(#app-shell) .scene-new-button:hover,
:where(#app-shell) .scene-play-button:hover { background: #ebecee; }
:where(#app-shell) .scene-list-item { color: #65676a; }
:where(#app-shell) .scene-list-item:hover,
:where(#app-shell) .scene-list-item.active { background: #f4f5f7; }
:where(#app-shell) .scene-side-heading p,
:where(#app-shell) .scene-list-copy small,
:where(#app-shell) .scene-composer > p:not(.scene-voice-note),
:where(#app-shell) .scene-record-status,
:where(#app-shell) .scene-voice-note,
:where(#app-shell) .scene-active-head #scene-active-meta,
:where(#app-shell) .scene-active-head .scene-active-goal { color: #75777a; }
:where(#app-shell) .scene-form label,
:where(#app-shell) .scene-composer label,
:where(#app-shell) .scene-section-title { color: #6e7073; }
:where(#app-shell) .scene-form input,
:where(#app-shell) .scene-form select,
:where(#app-shell) .scene-composer textarea { background: #f9fafb; border-color: #e9eaec; color: #65676a; }
:where(#app-shell) .scene-form input::placeholder,
:where(#app-shell) .scene-composer textarea::placeholder { color: #787a7d; }
:where(#app-shell) .scene-empty > span { background: #eff0f2; color: #76787b; }
:where(#app-shell) .scene-empty p,
:where(#app-shell) .scene-turns-empty { color: #75777a; }
:where(#app-shell) .scene-turns-empty span,
:where(#app-shell) .scene-turns-empty strong { color: #737578; }
:where(#app-shell) .scene-turns { background: #fafbfd; }
:where(#app-shell) .scene-turn-top strong { color: #6d6f72; }
:where(#app-shell) .scene-turn-top span { color: #76787b; background: #f4f5f7; }
:where(#app-shell) .scene-turn-top time { color: #797b7e; }
:where(#app-shell) .scene-original { background: #f3f4f6; }
:where(#app-shell) .scene-original small,
:where(#app-shell) .scene-original p,
:where(#app-shell) .scene-text-heading strong,
:where(#app-shell) .scene-text-card p { color: #717376; }
:where(#app-shell) .scene-text-card { background: #fff; border-color: #ecedef; }
:where(#app-shell) .scene-record-button { background: #f2f3f5; color: #727477; border-color: #e6e7e9; }
:where(#app-shell) .scene-form .primary-button,
:where(#app-shell) .bottle-action-card .primary-button,
:where(#app-shell) .bottle-reply-form .primary-button { background: #627c95; color: #fff; box-shadow: none; }
:where(#app-shell) .bottle-action-card .primary-button:hover,
:where(#app-shell) .bottle-reply-form .primary-button:hover { background: #536d86; }

/* Settings and moments use the same quiet gray cards. Cover/portrait/media
   elements are not filtered, recolored or replaced. */
:where(#app-shell) .profile-banner { background: #f6f7f9; color: #4b5865; }
:where(#app-shell) .profile-banner-spark { color: #898b8e; }
:where(#app-shell) .profile-banner p:last-child,
:where(#app-shell) .profile-banner .profile-signature-display { color: #747679; }
:where(#app-shell) .profile-cover { background: #ebecee; border-color: #e5e6e8; }
:where(#app-shell) .profile-cover-placeholder { color: #77797c; }
:where(#app-shell) .profile-cover-actions button,
:where(#app-shell) .profile-cover-actions .media-upload-button { color: #6b6d70; background: #ffffffed; border-color: #e8e9eb; }
:where(#app-shell) .profile-card,
:where(#app-shell) .public-id-card,
:where(#app-shell) .post-composer-card,
:where(#app-shell) .post-card { background: #fff; border-color: #ebecee; box-shadow: none; }
:where(#app-shell) .profile-form label { color: #6f7174; }
:where(#app-shell) .profile-form input,
:where(#app-shell) .profile-form select,
:where(#app-shell) .profile-form textarea { background: #f8f9fb; color: #66686b; border-color: #e9eaec; }
:where(#app-shell) .profile-form input::placeholder,
:where(#app-shell) .profile-form textarea::placeholder { color: #787a7d; }
:where(#app-shell) .card-head p,
:where(#app-shell) .language-catalog-note,
:where(#app-shell) .profile-media-actions #profile-media-status,
:where(#app-shell) .interface-language,
:where(#app-shell) .interface-language > span,
:where(#app-shell) .interface-language > p { color: #75777a; }
:where(#app-shell) .interface-language > select { color: #707275; border-color: #e8e9eb; }
:where(#app-shell) .public-id-card { background: #f8f9fb; }
:where(#app-shell) .public-id-card small,
:where(#app-shell) .public-id-card p { color: #747679; }
:where(#app-shell) .public-id-card strong { color: #6b6d70; }
:where(#app-shell) .moments-intro { background: #f7f8fa; border-color: #ecedef; }
:where(#app-shell) .moments-intro h2 { color: #626467; }
:where(#app-shell) .moments-intro p:last-child { color: #76787b; }
:where(#app-shell) .post-composer-card textarea { background: #f8fafb; color: #6d6f72; border-color: #eaebed; }
:where(#app-shell) .post-composer-card textarea::placeholder { color: #797b7e; }
:where(#app-shell) .post-media-count,
:where(#app-shell) .post-upload-note,
:where(#app-shell) .post-draft-status,
:where(#app-shell) .post-feed-head > span { color: #787a7d; }
:where(#app-shell) .post-draft-item { background: #f9fafc; border-color: #eaebed; }
:where(#app-shell) .post-author { color: #686a6d; }
:where(#app-shell) .post-author small { color: #7a7c7f; }
:where(#app-shell) .post-text { color: #696b6e; }
:where(#app-shell) .post-image-link { background: #f2f3f5; }
:where(#app-shell) .post-video { background: #222a33; }
:where(#app-shell) .practice-hub,
:where(#app-shell) .practice-card,
:where(#app-shell) .learning-card,
:where(#app-shell) .practice-item,
:where(#app-shell) .learning-expression,
:where(#app-shell) .learning-correction { background: #fff; border-color: #eaebed; box-shadow: none; }
:where(#app-shell) .practice-hub-note,
:where(#app-shell) .practice-card p,
:where(#app-shell) .learning-intro p { color: #717376; }
:where(#app-shell) .practice-card label,
:where(#app-shell) .learning-card label { color: #6c6e71; }
:where(#app-shell) .practice-card input,
:where(#app-shell) .practice-card select,
:where(#app-shell) .learning-card input,
:where(#app-shell) .learning-card select,
:where(#app-shell) .learning-card textarea { background: #f9fafc; color: #6a6c6f; border-color: #e8e9eb; }
:where(#app-shell) .practice-turns,
:where(#app-shell) .learning-progress span,
:where(#app-shell) .learning-original,
:where(#app-shell) .message-quote,
:where(#app-shell) .chat-quote-preview { background: #f2f3f5; color: #717376; }
:where(#app-shell) .practice-item small,
:where(#app-shell) .learning-expression small,
:where(#app-shell) .learning-correction small,
:where(#app-shell) .learning-original-label { color: #727477; }
:where(#app-shell) .practice-item-actions button,
:where(#app-shell) .learning-review-actions button,
:where(#app-shell) .message-action-bar button,
:where(#app-shell) .voice-speed button { background: #f4f5f7; color: #6e7073; border-color: #e8e9eb; }
:where(#app-shell) .voice-speed button.active { background: #e4e5e7; color: #686a6d; }
:where(#app-shell) .voice-preview,
:where(#app-shell) .suggestion-box { background: #f8f9fb; border-color: #ebecee; }
:where(#app-shell) .voice-preview button,
:where(#app-shell) .suggestion-box button { background: #f1f2f4; color: #6f7174; }
:where(#app-shell) .voice-preview button:last-child,
:where(#app-shell) .suggestion-box button:last-child { background: #f3f4f6; color: #747679; }
:where(#app-shell) .suggestion-box strong,
:where(#app-shell) .voice-preview span { color: #707275; }
:where(#app-shell) .suggestion-box small { color: #77797c; }

/* Drift bottles remain recognizable through their existing glass shapes,
   without a green sea/panel treatment. No new visual status is invented. */
:where(#app-shell) .bottle-entry-card,
:where(#app-shell) .bottles-hero { background: #f6f7f9; border-color: #e8e9eb; color: #66686b; box-shadow: none; }
:where(#app-shell) .bottles-hero::after { background: #eaebed; box-shadow: -150px 12px 0 10px #eef2f6; }
:where(#app-shell) .bottle-entry-copy > strong,
:where(#app-shell) .bottles-hero h2 { color: #65676a; }
:where(#app-shell) .bottle-entry-copy > small,
:where(#app-shell) .bottle-entry-copy > span,
:where(#app-shell) .bottle-entry-arrow,
:where(#app-shell) .bottles-hero .eyebrow,
:where(#app-shell) .bottles-hero p:last-child { color: #77797c; }
:where(#app-shell) .bottle-free-tag { background: #f2f3f5; border-color: #e7e8ea; color: #76787b; }
:where(#app-shell) .bottle-glass-art { background: #f3f4f6; border-color: #b8c8d8; box-shadow: inset -7px 0 8px #b9c9d923,12px 17px 25px #6c88a312; }
:where(#app-shell) .bottle-glass-art::before { background: #edeef0; border-color: #b8c8d8; }
:where(#app-shell) .bottle-glass-art::after { background: #c0cbd6; border-color: #aebcc9; }
:where(#app-shell) .bottle-glass-art > span { background: #f9fafc; border-color: #e3e4e6; }
:where(#app-shell) .bottle-glass-art > span::after { background: #cbd7e3; box-shadow: 0 8px #cbd7e3,0 16px #cbd7e3; }
:where(#app-shell) .bottle-quota-row,
:where(#app-shell) .bottle-action-card,
:where(#app-shell) .bottle-list-card,
:where(#app-shell) .bottle-detail-card { background: #fff; border-color: #eaebed; }
:where(#app-shell) .bottle-quota-row strong { color: #707275; }
:where(#app-shell) .bottle-quota-row small,
:where(#app-shell) .bottle-quota-row span,
:where(#app-shell) .bottle-reset-time,
:where(#app-shell) .bottle-card-heading p,
:where(#app-shell) .bottle-pick-note,
:where(#app-shell) .bottle-expiry-note,
:where(#app-shell) .bottle-privacy-note { color: #787a7d; }
:where(#app-shell) .bottle-card-heading > span { background: #f1f2f4; color: #797b7e; }
:where(#app-shell) .bottle-card-heading h3 { color: #717376; }
:where(#app-shell) .bottle-action-card textarea,
:where(#app-shell) .bottle-action-card input,
:where(#app-shell) .bottle-action-card select,
:where(#app-shell) .bottle-reply-form textarea { background: #f9fafc; border-color: #e8e9eb; color: #717376; }
:where(#app-shell) .bottle-action-card textarea::placeholder,
:where(#app-shell) .bottle-action-card input::placeholder,
:where(#app-shell) .bottle-reply-form textarea::placeholder { color: #7c7e81; }
:where(#app-shell) .bottle-action-card label,
:where(#app-shell) .bottle-reply-form > label { color: #787a7d; }
:where(#app-shell) .bottle-pick-card { background: #f9fafc; }
:where(#app-shell) .bottle-list-head,
:where(#app-shell) .bottle-list-item,
:where(#app-shell) .bottle-identity-panel,
:where(#app-shell) .bottle-reply-form,
:where(#app-shell) .bottle-visibility-settings { border-color: #f0f1f3; }
:where(#app-shell) .bottle-box-tabs { background: #f3f4f6; }
:where(#app-shell) .bottle-box-tabs button { color: #797b7e; }
:where(#app-shell) .bottle-box-tabs button.active { color: #75777a; box-shadow: none; }
:where(#app-shell) .bottle-icon-button { background: #f5f6f8; color: #7b7d80; border-color: #ecedef; }
:where(#app-shell) .bottle-list-item.active { background: #f5f6f8; }
:where(#app-shell) .bottle-list-open { color: #737578; }
:where(#app-shell) .bottle-list-open > small,
:where(#app-shell) .bottle-detail-head small { color: #7b7d80; background: #f3f4f6; }
:where(#app-shell) .bottle-list-open p { color: #7a7c7f; }
:where(#app-shell) .bottle-list-open > span,
:where(#app-shell) .bottle-list-item .bottle-list-report,
:where(#app-shell) .bottle-list .empty-state p { color: #7f8184; }
:where(#app-shell) .bottle-detail-empty > span { background: #f4f5f7; color: #7e8083; }
:where(#app-shell) .bottle-detail-empty h3,
:where(#app-shell) .bottle-list .empty-state strong { color: #7c7e81; }
:where(#app-shell) .bottle-detail-empty p { color: #808285; }
:where(#app-shell) .bottle-detail-head h3 { color: #747679; }
:where(#app-shell) .bottle-detail-head p,
:where(#app-shell) .bottle-identity-panel > p,
:where(#app-shell) .bottle-detail-actions .text-button { color: #7e8083; }
:where(#app-shell) .bottle-original { background: #f7f8fa; border-color: #ecedef; }
:where(#app-shell) .bottle-original > small,
:where(#app-shell) .bottle-original > p { color: #797b7e; }
:where(#app-shell) .bottle-peer-card { background: #f7f8fa; border-color: #ebecee; }
:where(#app-shell) .bottle-peer-card strong { color: #787a7d; }
:where(#app-shell) .bottle-peer-card small { color: #7f8184; }
:where(#app-shell) .bottle-thread-empty { color: #818386; }
:where(#app-shell) .bottle-message { background: #f5f6f8; border-color: #edeef0; }
:where(#app-shell) .bottle-message.own { background: #eff0f2; border-color: #e8e9eb; }
:where(#app-shell) .bottle-message > small,
:where(#app-shell) .bottle-message > p { color: #787a7d; }
:where(#app-shell) .bottle-message > time,
:where(#app-shell) .bottle-reply-form > div > small { color: #808285; }
:where(#app-shell) .bottle-visibility-settings > .text-button { color: #7d7f82; }
:where(#app-shell) .bottle-friends-badge { color: #7b7d80; border-color: #e9eaec; background: #f4f5f7; }

/* Call surfaces retain real stream colors and red end-call semantics. */
#call-panel.call-panel { border-color: #eaebed; color: #636568; box-shadow: 0 22px 75px #1d2e4126; }
#call-panel .call-heading strong { color: #606265; }
#call-panel #call-status,
#call-panel .call-network-note { color: #787a7d; }
#call-panel #call-media-actions button { background: #f6f7f9; color: #737578; border-color: #ebecee; }
#call-panel #call-accept { background: #6c87a1; color: #fff; }
@media (max-width: 760px) {
  :where(#app-shell) .nav-item.active { background: transparent; color: #6b859e; }
}

/* The existing profile dialog is a sibling of the app shell, not a new page. */
:where(#app-shell) ~ #person-dialog.learning-profile { background: #fff; border-color: #e7eaed; color: #343b43; box-shadow: 0 30px 100px #2331422e; }
:where(#app-shell) ~ #person-dialog .person-dialog-cover { background: #edf0f3; }
:where(#app-shell) ~ #person-dialog .person-dialog-close { color: #76818d; box-shadow: 0 3px 12px #1b2c3c12; }
:where(#app-shell) ~ #person-dialog .person-dialog-heading p,
:where(#app-shell) ~ #person-dialog .person-dialog-location,
:where(#app-shell) ~ #person-dialog .person-dialog-interests,
:where(#app-shell) ~ #person-dialog .person-dialog-bio { color: #89939e; }
:where(#app-shell) ~ #person-dialog .person-dialog-signature,
:where(#app-shell) ~ #person-dialog .learning-profile-detail p { color: #75808d; }
:where(#app-shell) ~ #person-dialog .person-dialog-languages { color: #72889f; }
:where(#app-shell) ~ #person-dialog .learning-profile-chat { background: #617c96; border-color: #617c96; color: #fff; }
:where(#app-shell) ~ #person-dialog .learning-profile-language-grid { background: #f7f8fa; border-color: #e8ecf0; }
:where(#app-shell) ~ #person-dialog .learning-profile-language-grid strong { color: #667c93; }
:where(#app-shell) ~ #person-dialog .learning-profile-language-grid small,
:where(#app-shell) ~ #person-dialog .learning-profile-language-grid > span,
:where(#app-shell) ~ #person-dialog .learning-profile-detail > small { color: #969fa9; }
:where(#app-shell) ~ #person-dialog .learning-profile-goal h3,
:where(#app-shell) ~ #person-dialog .learning-profile-detail h3 { color: #5f6a76; }
:where(#app-shell) ~ #person-dialog .community-level { background: #f1f3f6; border-color: #e6eaf0; color: #8b97a5; }