@font-face {
  font-family: 'Fredoka One';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local('Fredoka One Cyrillic'),
       local('Fredoka One'),
       local('FredokaOne-Regular'),
       url('https://fonts.gstatic.com/s/fredokaone/v15/k3kUo8kEI-tA1RRcTZGmTmHB.ttf') format('truetype');
}

:root{font-family:'Inter',sans-serif;color-scheme:light;--background:#f4f3f8;--surface:#fff;--surface-secondary:#eeedf3;--text-primary:#0b0a14;--text-secondary:#838099;--border:#dedde4;--accent:#2850d1;--accent-soft:#e4e9ff;--danger:#e05757;--shadow:0 14px 40px rgba(11,10,20,.06)}
@media(prefers-color-scheme:dark){:root{color-scheme:dark}}[data-theme="dark"]{--background:#171916;--surface:#20231f;--surface-secondary:#292d27;--text-primary:#eef0e9;--text-secondary:#9a9f94;--border:#343932;--accent:#657fd3;--accent-soft:#303b2b;--danger:#e38176;--shadow:0 14px 40px rgba(0,0,0,.2)}[data-theme="light"]{color-scheme:light}[data-theme="system"]{color-scheme:light}@media(prefers-color-scheme:dark){[data-theme="system"]{--background:#171916;--surface:#20231f;--surface-secondary:#292d27;--text-primary:#eef0e9;--text-secondary:#9a9f94;--border:#343932;--accent:#657fd3;--accent-soft:#303b2b;--danger:#e38176;--shadow:0 14px 40px rgba(0,0,0,.2);color-scheme:dark}}

.topbar,
.view-heading,
.sidebar-label,
.space-nav,
.sidebar-create,
.sidebar-bottom,
.sidebar-scrim,
.desktop-spacer,
.card-arrow,
.desktop-space-copy,
.settings-heading,
.settings-layout,
.profile-mini {
  display: none !important;
}

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none;
}

::selection {
  background-color: rgba(101, 127, 211, 0.22);
  color: inherit;
}
::-moz-selection {
  background-color: rgba(101, 127, 211, 0.22);
  color: inherit;
}

html,
body,
button,
a,
input[type="button"],
input[type="submit"],
.space-card,
.header-circle-btn,
.desktop-icon-btn,
.mobile-home-icon,
.mobile-settings-button,
.screen-back,
.attach-btn,
.composer-send-btn,
.settings-card,
.theme-btn,
.personality,
.toggle,
.chat-menu,
.chat-header,
.desktop-home-header,
.sidebar,
.topbar,
.post-card-footer,
.original-post-banner,
.attachment-chip,
.settings-profile-banner,
.settings-profile-edit-btn,
.photo-field,
.card-top,
.space-symbol,
.brand,
.lightbox-close {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.post-card-text,
.post-card-title,
.comment-card-text,
.original-post-content,
.message-content,
input,
textarea,
[contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

button:focus,
button:active,
a:focus,
a:active,
.space-card:focus,
.space-card:active,
.header-circle-btn:focus,
.header-circle-btn:active {
  outline: none;
}

:root {
  --ripple-color: rgba(40, 80, 209, 0.1);
}

[data-theme="dark"] {
  --ripple-color: rgba(255, 255, 255, 0.14);
}

.primary-button,
.mobile-create-space,
.create-chat-button.active,
.composer-send-btn.active,
.personality.active {
  --ripple-color: rgba(255, 255, 255, 0.32);
}

.danger-button,
.settings-delete-btn,
.chat-menu button.danger-text {
  --ripple-color: rgba(229, 57, 53, 0.2);
}

.ripple-surface,
button,
.space-card,
.post-card-footer,
.settings-card,
.theme-btn,
.header-circle-btn,
.desktop-icon-btn,
.mobile-home-icon,
.mobile-settings-button,
.screen-back,
.attach-btn,
.composer-send-btn,
.primary-button,
.secondary-button,
.danger-button,
.mobile-create-space,
.create-chat-button,
.sidebar-create,
.settings-link,
.space-nav button,
.chat-menu button,
.settings-profile-edit-btn,
.photo-field,
.lightbox-close {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background-color: var(--ripple-color, rgba(40, 80, 209, 0.1));
  pointer-events: none;
  transform: scale(0);
  opacity: 1;
  transition: transform 0.38s cubic-bezier(0.1, 0.7, 0.1, 1), opacity 0.28s ease-out;
  will-change: transform, opacity;
  z-index: 10;
}

.personality-card .ripple-wave,
.personality .ripple-wave {
  display: none !important;
}

.ripple-wave.ripple-fade-out {
  opacity: 0 !important;
}

body{margin:0;background:var(--background);color:var(--text-primary);transition:background .25s,color .25s}button,input,textarea{font:inherit}button{border:0;color:inherit;cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app-shell{display:flex;min-height:100vh}.sidebar{width:246px;background:var(--surface);border-right:1px solid var(--border);padding:24px 16px 18px;display:flex;flex-direction:column;flex-shrink:0}.sidebar-top{display:flex;align-items:center;margin:0 8px 55px}.brand{display:flex;align-items:center;gap:10px;background:none;font-family:'Inter',sans-serif;font-weight:700;font-size:16px}.brand-mark,.space-symbol{display:grid;place-items:center;background:var(--accent);color:#fff;border-radius:8px;font-family:'Inter',sans-serif;font-weight:700}.brand-mark{width:26px;height:26px;font-size:13px}.sidebar-label{padding:0 10px 12px;color:var(--text-secondary);font-size:11px;text-transform:uppercase;letter-spacing:.1em}.sidebar-label span{float:right}.space-nav{display:flex;flex-direction:column;gap:3px}.space-nav button,.sidebar-create,.settings-link{width:100%;display:flex;align-items:center;gap:11px;padding:10px;border-radius:7px;background:transparent;text-align:left;color:var(--text-secondary);font-size:14px}.space-nav button:hover,.sidebar-create:hover,.settings-link:hover{background:var(--surface-secondary);color:var(--text-primary)}.space-nav button.active{background:var(--accent-soft);color:var(--text-primary);font-weight:600}.nav-icon{width:22px;height:22px;display:grid;place-items:center;background:var(--surface-secondary);border-radius:6px;font-size:12px}.sidebar-create{margin-top:13px;color:var(--accent);font-weight:600}.sidebar-create span{font-size:19px}.sidebar-bottom{margin-top:auto}.settings-link{border-top:1px solid var(--border);border-radius:0;padding:18px 10px 16px}.settings-icon{font-size:20px}.profile-mini{display:flex;align-items:center;gap:9px;padding:10px;color:var(--text-secondary);font-size:12px}.avatar{display:grid;place-items:center;width:27px;height:27px;background:#d9ddcf;color:#58624c;border-radius:50%;font-size:11px;font-weight:700}.status-dot{width:6px;height:6px;border-radius:50%;background:#89a676;margin-left:auto}.main-area{flex:1;min-width:0}.topbar{height:76px;padding:0 48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:var(--background)}.breadcrumb{display:flex;align-items:center;gap:13px;color:var(--text-secondary);font-size:13px}.breadcrumb .eyebrow{margin:0}.slash{color:var(--border)}.topbar-actions{display:flex;align-items:center;gap:14px}.search-field{display:flex;align-items:center;gap:7px;width:220px;padding:8px 11px;border:1px solid var(--border);background:var(--surface);border-radius:7px;color:var(--text-secondary)}.search-field input{border:0;outline:0;background:none;color:var(--text-primary);width:100%;font-size:12px}.icon-button{background:transparent;color:var(--text-secondary);font-size:17px;padding:6px}.icon-button:hover{color:var(--text-primary)}.menu-toggle,.mobile-close{display:none}.view{max-width:1100px;margin:0 auto;padding:54px 48px}.view-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:42px}.eyebrow{margin:0 0 11px;color:var(--accent);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em}.view h1{font-family:'Inter',sans-serif;font-size:31px;letter-spacing:-.04em;margin:0 0 9px}.heading-copy{margin:0;color:var(--text-secondary);font-size:14px}.primary-button{background:var(--accent);color:#fff;padding:11px 16px;border-radius:7px;font-size:13px;font-weight:600;transition:transform .2s,background .2s}.primary-button:hover{background:#566449;transform:translateY(-1px)}.primary-button span{font-size:16px;vertical-align:-1px}.spaces-grid{display:flex;flex-direction:column;gap:0;width:100%;box-sizing:border-box}.space-card{display:flex;align-items:center;width:100%;height:74px;min-height:74px;padding:10px 0;margin:0;background:transparent;border:0;border-radius:0;box-shadow:none;gap:8px;box-sizing:border-box;cursor:pointer;flex-shrink:0;transition:background-color .15s ease}.space-card:hover{background:rgba(40,80,209,0.03);border-radius:8px}.space-card .card-top{display:block;flex-shrink:0}.space-card .space-symbol{width:54px;height:54px;min-width:54px;border-radius:9999px;overflow:hidden;background:linear-gradient(135deg, #657FD3 0%, #455EB5 100%);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;font-family:'Inter',sans-serif;font-size:24px;font-weight:600;line-height:1;text-transform:uppercase}.space-card .card-arrow,.space-card .desktop-space-copy{display:none!important}.space-card .mobile-space-copy{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0;height:54px;gap:4px}.space-card .mobile-space-line{display:flex;align-items:center;justify-content:space-between;gap:4px;height:19px}.space-card .mobile-space-line h2{overflow:hidden;flex:1;margin:0;font-family:'Inter',sans-serif;font-size:16px;font-weight:500;line-height:19px;color:#0b0a14;white-space:nowrap;text-overflow:ellipsis}.space-card .mobile-space-line time{color:#4a4858;font-family:'Inter',sans-serif;font-size:14px;font-weight:500;line-height:16px;white-space:nowrap;flex-shrink:0}.space-card .mobile-space-copy p{overflow:hidden;margin:0;color:#4a4858;font-family:'Inter',sans-serif;font-size:14px;font-weight:400;line-height:16px;white-space:nowrap;text-overflow:ellipsis}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:0;border:0;border-radius:0;text-align:center}.empty-state h2{font-family:'Inter',sans-serif;color:#838099;font-size:16px;font-weight:400;margin:0 0 24px}.empty-state p{display:none!important}.hidden{display:none!important}.chat-view{height:calc(100vh - 76px);max-width:900px;padding-top:31px;display:flex;flex-direction:column}.chat-header{display:flex;align-items:center;gap:25px;padding-bottom:28px}.back-button{background:none;color:var(--text-secondary);font-size:13px}.back-button:hover{color:var(--text-primary)}.chat-title{display:flex;align-items:center;gap:12px;flex:1}.chat-title .space-symbol{width:34px;height:34px}.chat-title h1{font-size:19px;margin:0 0 3px}.chat-title p{font-size:12px;color:var(--text-secondary);margin:0}.message-list{flex:1;overflow:auto;padding:10px 7px 30px}.message{position:relative;padding:13px 16px;margin-bottom:18px;background:var(--surface);border:1px solid var(--border);border-radius:8px;max-width:76%;box-shadow:0 2px 8px rgba(20,30,15,.025)}.message.pinned{border-color:var(--accent);background:var(--accent-soft)}.message-content{font-size:14px;line-height:1.6;white-space:pre-wrap}.message-time{display:block;color:var(--text-secondary);font-size:10px;margin-top:8px}.pin-label{color:var(--accent);font-size:10px;margin-right:7px}.message-menu{position:absolute;right:7px;top:7px;background:none;color:var(--text-secondary);font-size:11px;opacity:0}.message:hover .message-menu{opacity:1}.composer{display:flex;gap:10px;align-items:end;padding:14px 0 2px;border-top:1px solid var(--border);background:var(--background)}.composer textarea{resize:none;flex:1;padding:13px 15px;min-height:45px;max-height:100px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);outline:0;font-size:13px}.send-button{width:44px;height:44px;background:var(--accent);color:#fff;border-radius:7px;font-size:20px}.settings-heading{margin-bottom:42px}.settings-layout{display:grid;grid-template-columns:160px 1fr;gap:66px;max-width:760px}.settings-nav{display:flex;flex-direction:column;gap:7px;color:var(--text-secondary);font-size:13px}.settings-nav span{padding:8px 10px}.settings-nav .active{color:var(--text-primary);background:var(--surface);border-radius:6px;font-weight:600}.settings-content{max-width:600px}.settings-section{padding-bottom:35px;margin-bottom:35px;border-bottom:1px solid var(--border)}.section-title h2{font-family:'Inter',sans-serif;font-size:15px;margin:0 0 6px}.section-title p{color:var(--text-secondary);font-size:12px;margin:0 0 22px}.profile-editor{display:flex;gap:22px;align-items:center}.large-avatar-wrap{cursor:pointer}.large-avatar{display:grid;place-items:center;width:70px;height:70px;background:#d9ddcf;color:#58624c;border-radius:50%;font-size:22px;font-weight:700}.large-avatar-wrap input{display:none}.form-fields{display:flex;gap:12px;flex:1}.form-fields label,.modal label{display:flex;flex-direction:column;gap:7px;color:var(--text-secondary);font-size:11px}.form-fields input,.modal input{padding:10px 11px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text-primary);outline:0;font-size:13px}.theme-options{display:flex;gap:8px}.theme-options button{flex:1;text-align:left;padding:11px 12px;background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--text-secondary);font-size:12px}.theme-options button.active{border-color:var(--accent);color:var(--text-primary);background:var(--accent-soft)}.theme-options span{float:right}.danger-actions{display:flex;flex-direction:column;gap:9px}.danger-actions button{display:flex;justify-content:space-between;padding:13px;background:var(--surface);border:1px solid var(--border);border-radius:6px;text-align:left;font-size:13px}.danger-actions button:hover{border-color:var(--danger);color:var(--danger)}.danger-actions span{color:var(--text-secondary);font-size:11px}.modal-backdrop{position:fixed;inset:0;display:grid;place-items:center;padding:20px;background:rgba(20,25,18,.4);z-index:5}.modal{position:relative;width:min(100%,390px);padding:30px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow)}.modal h2{font-family:'Inter',sans-serif;font-size:22px;margin:0 0 8px}.modal-copy{color:var(--text-secondary);font-size:13px;margin:0 0 25px}.modal-close{position:absolute;right:17px;top:14px;background:none;color:var(--text-secondary);font-size:21px}.modal form{display:flex;flex-direction:column;gap:16px}.full-width{width:100%;margin-top:6px}.toast{position:fixed;bottom:24px;left:50%;padding:11px 15px;border-radius:7px;background:var(--text-primary);color:var(--background);font-size:12px;transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:.25s;z-index:10}.toast.visible{transform:translate(-50%,0);opacity:1}

/* legacy media block cleared */

/* legacy media block cleared */

.settings-back{display:none}.settings-back + .eyebrow{margin-top:0}
@media(min-width:721px){.chat-view{height:100vh}}
@media(max-width:720px){.settings-back{display:block;margin-bottom:22px}.settings-back span{display:inline}}

.profile-mini{width:100%;background:transparent;text-align:left}.profile-mini:hover{background:var(--surface-secondary);border-radius:7px}.profile-arrow{margin-left:auto;color:var(--text-secondary);font-size:23px;line-height:1}.mobile-settings-button{display:none}
.chat-count{display:block;color:var(--text-secondary);font-size:10px;margin-top:5px}.chat-menu-wrap{position:relative}.chat-menu{position:absolute;right:0;top:35px;width:180px;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 24px rgba(11,10,20,.12);z-index:2}.chat-menu button{display:block;width:100%;padding:9px 12px;background:transparent;text-align:left;color:var(--text-secondary);font-size:13px;border-radius:6px;font-family:'Inter',sans-serif;cursor:pointer;border:0;transition:background-color .15s ease,color .15s ease}.chat-menu button:hover{background:var(--surface-secondary);color:var(--text-primary)}
.chat-menu button.danger-text{color:#e53935!important;font-weight:500}
.chat-menu button.danger-text:hover{background:rgba(229,57,53,0.08)!important;color:#d32f2f!important}
.secondary-button{padding:10px 16px;background:#f4f3f8;border:0;border-radius:29px;color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:background-color .15s ease}.secondary-button:hover{background:#ebe9f2;color:var(--text-primary)}.compact-modal{width:min(100%,410px)}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:6px}.modal-actions button{min-width:94px}.modal input[type=date]{color-scheme:inherit}
.danger-button{background:#e53935!important;color:#fff!important;border:0!important;border-radius:29px}.danger-button:hover{background:#d32f2f!important}
#action-backdrop{background:rgba(0,0,0,0.70);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
#action-backdrop .modal{background:#ffffff;border-radius:20px;box-shadow:0 16px 40px rgba(11,10,20,0.15);padding:24px;border:0}
#action-backdrop .modal h2{font-family:'Inter',sans-serif;font-size:20px;font-weight:600;color:#0b0a14;margin:0 0 8px}
#action-backdrop .modal-copy{font-family:'Inter',sans-serif;font-size:14px;color:#838099;line-height:20px;margin:0 0 20px}
#action-backdrop .modal-actions button{border-radius:29px;height:42px;display:inline-flex;align-items:center;justify-content:center}
.modal-backdrop:has(.create-space-screen),
#modal-backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.70);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:100;padding:20px;box-sizing:border-box}
.create-space-screen{width:480px;min-width:480px;max-width:480px;height:auto;max-height:min(864px,calc(100vh - 40px));background:#ffffff;color:#0b0a14;border-radius:22px;display:flex;flex-direction:column;box-shadow:0 16px 36px rgba(11,10,20,.16);box-sizing:border-box;overflow:hidden}
.create-screen-header{height:57px;min-height:57px;display:flex;align-items:center;justify-content:space-between;padding:10px 20px;border-bottom:1px solid rgba(64,64,64,.1);background:#ffffff;box-sizing:border-box;flex-shrink:0}
.screen-header-copy{display:flex;align-items:center}
.screen-header-copy h2{margin:0;font-family:'Roboto','Inter',sans-serif;font-size:17px;font-weight:500;line-height:20px;color:#0b0a14}
.screen-close{width:36px;height:36px;min-width:36px;padding:0;border:0;border-radius:30px;background:rgba(255,255,255,0.8);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color .15s ease,transform .1s ease}
.screen-close:hover{background:#f4f3f8}
.screen-close:active{transform:scale(0.96)}
.screen-close svg{display:block;width:20px;height:20px}
.create-space-form{display:flex;flex-direction:column;gap:16px;padding:20px 10px;box-sizing:border-box;width:100%;flex:1;overflow-y:auto;scrollbar-width:none}
.create-space-form::-webkit-scrollbar{display:none}
.create-form-content{display:flex;flex-direction:column;gap:16px;width:100%}
.space-blocks-wrap{display:flex;flex-direction:column;gap:8px;width:100%}

/* Avatar picker and Space Name (Figma 525:2412) */
.space-avatar-picker-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.space-avatar-circle{display:flex;align-items:center;justify-content:center;width:90px;height:90px;min-width:90px;min-height:90px;border-radius:50%;background:#f4f3f8;cursor:pointer;padding:0;margin:0;position:relative;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
.space-avatar-circle:hover{transform:scale(1.03)}
.space-avatar-circle input{display:none}
#space-image-preview{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;overflow:hidden}
#space-image-preview svg{display:block;width:42px;height:42px}
#space-image-preview img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.space-name-wrap{width:100%;display:flex;align-items:center;justify-content:center}
#space-name{width:100%;height:56px;min-height:56px;background:#fafafa;border:0;border-radius:9999px;outline:0;font-family:'Inter',sans-serif;font-size:16px;font-weight:500;line-height:20px;color:#0b0a14;text-align:center;padding:0 24px;box-sizing:border-box;transition:border-color .2s ease,background-color .2s ease}
#space-name:focus{outline:0;box-shadow:none}
#space-name::placeholder{color:rgba(131,128,153,0.8);opacity:1}

/* AI assistant card */
.create-space-screen .ai-section{padding:10px;background:#f4f3f8;border:1px solid rgba(131,128,153,0.2);border-radius:12px;display:flex;flex-direction:column;box-sizing:border-box;width:100%}
.create-space-screen .ai-heading{height:32px;display:flex;align-items:center;justify-content:space-between;gap:6px;cursor:pointer;user-select:none}
.create-space-screen .ai-title{font-family:'Inter',sans-serif;font-size:16px;font-weight:500;line-height:19px;color:#0b0a14}
.create-space-screen .toggle{position:relative;width:52px;height:32px;min-width:52px;cursor:pointer;display:block}
.create-space-screen .toggle input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.create-space-screen .toggle-track{position:absolute;inset:0;border-radius:100px;background-color:#e5e8eb;transition:background-color .25s ease;display:flex;align-items:center;padding:4px;box-sizing:border-box}
.create-space-screen .toggle-thumb{width:24px;height:24px;border-radius:50%;background-color:#ffffff;transition:transform .25s cubic-bezier(0.4,0,0.2,1),background-color .25s ease;display:block;transform:translateX(0);box-shadow:0 1px 3px rgba(0,0,0,0.2)}
.create-space-screen .toggle input:checked+.toggle-track,
.create-space-screen .ai-section.is-expanded .toggle-track{background-color:#2850d1}
.create-space-screen .toggle input:checked+.toggle-track .toggle-thumb,
.create-space-screen .ai-section.is-expanded .toggle-track .toggle-thumb{transform:translateX(20px)}
.create-space-screen .ai-settings-wrapper{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;overflow:hidden;transition:grid-template-rows .28s cubic-bezier(0.4,0,0.2,1),opacity .22s ease,margin-top .28s cubic-bezier(0.4,0,0.2,1)}
.create-space-screen .ai-section.is-expanded .ai-settings-wrapper{grid-template-rows:1fr;opacity:1;margin-top:22px}
.create-space-screen .ai-settings-content{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:16px;width:100%}
.personality-header-block{display:flex;flex-direction:column;gap:4px}
.personality-title{font-family:'Inter',sans-serif;font-size:16px;font-weight:400;line-height:19px;color:#4a4858}
.personality-subtitle{font-family:'Inter',sans-serif;font-size:14px;font-weight:400;line-height:17px;color:#838099}

/* Personas options container */
.personality-scroll-wrapper{width:100%;overflow:visible}
.personality-options{width:100%;display:flex;flex-direction:row;align-items:flex-start;gap:12px;box-sizing:border-box;padding:4px 6px;overflow:visible}

/* Individual Persona Card */
.personality-card{display:flex;flex-direction:column;align-items:center;gap:4px;width:93px;cursor:pointer;background:transparent;border:0;padding:0;margin:0;user-select:none;transition:opacity .15s ease;opacity:0.4;overflow:visible!important}
.personality-card:hover{opacity:0.75}
.personality-card.active{opacity:1}
.personality-card-avatar{width:93px;height:93px;border-radius:50%;overflow:hidden;position:relative;box-sizing:border-box;transition:box-shadow .15s ease}
.personality-card.active .personality-card-avatar{box-shadow:0 0 0 2px #7c9af9}
.personality-card-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.personality-card-name{font-family:'Inter',sans-serif;font-size:16px;font-weight:400;line-height:19px;color:#4a4858;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;transition:color .15s ease,font-weight .15s ease}
.personality-card.active .personality-card-name{font-weight:500;color:#0b0a14}

/* "+ Создать свою личность" */
.create-space-screen .model-button{height:46px;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 0;background:transparent;border:0;border-radius:9999px;cursor:pointer;color:#4a4858;width:100%;transition:background-color .15s ease}
.create-space-screen .model-button:hover{background:rgba(0,0,0,0.04)}
.create-space-screen .model-button svg{width:20px;height:20px;flex-shrink:0;display:block}
.create-space-screen .model-button svg path{stroke:#4a4858}
.create-space-screen .model-button span{font-family:'Inter',sans-serif;font-size:16px;font-weight:500;line-height:19px;color:#4a4858}

/* Prompt Card "Для чего пространство" */
.space-blocks-wrap:has(.ai-section:not(.is-expanded)) .space-prompt-card,
.ai-section:not(.is-expanded) + .space-prompt-card,
.space-prompt-card.hidden{display:none!important}
.space-prompt-card{width:100%;min-height:119px;background:#f4f3f8;border:1px solid rgba(131,128,153,0.2);border-radius:12px;padding:10px;box-sizing:border-box;display:flex}
.space-prompt-card textarea{width:100%;height:100%;min-height:95px;border:0;outline:0;background:transparent;font-family:'Inter',sans-serif;font-size:14px;font-weight:400;line-height:18px;color:#0b0a14;padding:0;resize:none;box-sizing:border-box}
.space-prompt-card textarea::placeholder{color:rgba(131,128,153,0.6);opacity:1}

/* Desktop Sheet Container Defaults */
.sheet-drag-handle { display: none !important; }
.create-space-footer { width: 100%; }

/* Submit Button */
.create-chat-button {
  width: 100%;
  height: 50px;
  min-height: 50px;
  margin: 0;
  background: #ecebf4;
  opacity: 1;
  border: 0;
  border-radius: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto', 'Inter', -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  color: #838099;
  cursor: not-allowed;
  pointer-events: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .1s ease;
  flex-shrink: 0;
  box-shadow: none;
}
.create-chat-button.active {
  background: #2850d1;
  color: #ffffff;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 4px 14px rgba(40, 80, 209, 0.25);
}
.create-chat-button.active:hover { background: #2044b8; }
.create-chat-button.active:active { transform: scale(0.99); }

/* Dark theme */
[data-theme="dark"] .create-space-screen{background:#191823;color:#eef0e9}
[data-theme="dark"] .create-screen-header{background:#191823;border-bottom-color:rgba(255,255,255,0.1)}
[data-theme="dark"] .screen-header-copy h2{color:#eef0e9}
[data-theme="dark"] .screen-close{background:rgba(255,255,255,0.1)}
[data-theme="dark"] .screen-close svg path{stroke:#eef0e9}
[data-theme="dark"] .space-avatar-circle{background:#232230}
[data-theme="dark"] #space-name{background:#232230;border:0;color:#eef0e9}
[data-theme="dark"] #space-name:focus{outline:0;box-shadow:none}
[data-theme="dark"] #space-name::placeholder{color:rgba(154,159,148,0.8)}
[data-theme="dark"] .create-space-screen .ai-section{background:#232230;border-color:rgba(255,255,255,0.2)}
[data-theme="dark"] .create-space-screen .ai-title{color:#eef0e9}
[data-theme="dark"] .personality-title{color:#c5c4d4}
[data-theme="dark"] .personality-subtitle{color:#838099}
[data-theme="dark"] .personality-card-name{color:#a09eb0}
[data-theme="dark"] .personality-card.active .personality-card-name{color:#ffffff}
[data-theme="dark"] .create-space-screen .model-button{color:#c5c4d4}
[data-theme="dark"] .create-space-screen .model-button:hover{background:rgba(255,255,255,0.06)}
[data-theme="dark"] .create-space-screen .model-button svg path{stroke:#c5c4d4}
[data-theme="dark"] .space-prompt-card{background:#232230;border-color:rgba(255,255,255,0.2)}
[data-theme="dark"] .space-prompt-card textarea{color:#eef0e9}
[data-theme="dark"] .create-chat-button { background: #232230; color: #6f6d85; }
[data-theme="dark"] .create-chat-button.active { background: #2850d1; color: #ffffff; box-shadow: 0 4px 14px rgba(40, 80, 209, 0.35); }

html:has(body[data-route="chat"]),
html:has(body[data-route="discussion"]),
body[data-route="chat"],
body[data-route="discussion"] {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--background);
}
body[data-route="chat"] .app-shell,body[data-route="discussion"] .app-shell{height:100%;overflow:hidden}
.chat-view{position:relative;display:flex;flex-direction:column;height:var(--app-height,100dvh);max-height:var(--app-height,100dvh);background-color:#c2c1c8;overflow:hidden;box-sizing:border-box;padding:0;max-width:100%}
.chat-view::before{content:'';position:absolute;inset:0;background-image:var(--space-bg,url('./space_bg.jpg?v=1788891231'));background-size:cover;background-position:center top;opacity:0.14;pointer-events:none;z-index:0}
.chat-view::after{display:none!important}

/* Базовые стили шапки */
.chat-header{position:relative;z-index:25;flex-shrink:0;height:65px;min-height:65px;display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background:transparent;border:0;box-sizing:border-box;width:100%;margin:0}
.header-circle-btn{width:44px;height:44px;min-width:44px;border-radius:30px;border:0;background:rgba(255,255,255,0.8);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:opacity .15s ease,transform .1s ease;flex-shrink:0}
.header-circle-btn:hover{opacity:0.9}
.header-circle-btn:active{transform:scale(0.96)}
.header-circle-btn svg{display:block;width:24px;height:24px}
.chat-header-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:1;min-width:0;padding:0 8px}
.chat-header-center .space-title{margin:0;font-family:'Inter',sans-serif;font-size:16px;font-weight:500;line-height:19px;color:#0b0a14;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.chat-header-center .space-subtitle{font-family:'Inter',sans-serif;font-size:14px;font-weight:500;line-height:16px;color:#4a4858;text-align:center}

/* Парящая шапка пространства (Figma Frame 9: 37:233 / 364:1676) */
/* Парящая шапка пространства (Figma Frame 9: 389:1765 mobile / 364:1676 desktop) */
.chat-header.space-header-pill {
  position: relative !important;
  top: auto !important;
  z-index: 25 !important;
  flex-shrink: 0;
  width: calc(100% - 32px) !important;
  max-width: 590px !important;
  height: 55px !important;
  min-height: 55px !important;
  margin: max(10px, env(safe-area-inset-top, 10px)) auto 6px auto !important;
  padding: 8px 10px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(64, 64, 64, 0.08) !important;
  box-shadow: 0 4px 16px rgba(11, 10, 20, 0.05) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.space-header-pill .space-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 1 !important;
  height: 100% !important;
}

.space-header-pill .space-header-meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  user-select: none !important;
  min-width: 0 !important;
  flex: 1 !important;
  height: 100% !important;
  -webkit-tap-highlight-color: transparent !important;
}

.space-header-pill .space-header-meta:hover {
  opacity: 0.92;
}

.space-header-pill .space-header-meta:active {
  transform: scale(0.985);
  transition: transform 0.1s ease;
}

.space-header-pill .space-avatar-wrap {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #ecebf2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.space-header-pill .space-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block;
}

.space-header-pill .space-avatar-img.hidden,
.space-header-pill .space-avatar-wrap.is-letter .space-avatar-img {
  display: none !important;
}

.space-header-pill .space-avatar-wrap.is-letter {
  background: linear-gradient(135deg, #657FD3 0%, #455EB5 100%) !important;
}

.space-header-pill .space-avatar-letter {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.space-card .space-symbol.is-letter,
.space-card .space-symbol:has(.space-symbol-letter),
.space-symbol.is-letter {
  background: linear-gradient(135deg, #657FD3 0%, #455EB5 100%) !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.space-card .space-symbol .space-symbol-letter,
.space-symbol-letter {
  font-family: 'Inter', sans-serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.space-header-pill .space-header-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 4px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.space-header-pill .space-title {
  margin: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 19px !important;
  color: #0b0a14 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: left !important;
  max-width: 100% !important;
}

.space-header-pill .space-subtitle {
  margin: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  color: #4a4858 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: left !important;
  max-width: 100% !important;
}

.space-header-pill .space-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.space-header-pill .header-circle-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  background: #f4f3f8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: background 0.15s ease, transform 0.1s ease !important;
  flex-shrink: 0 !important;
}

.space-header-pill .header-circle-btn:hover {
  background: #eae9f2 !important;
}

.space-header-pill .header-circle-btn:active {
  transform: scale(0.94) !important;
}

.space-header-pill .header-circle-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

.space-header-pill .space-back-btn {
  display: flex !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  background: #f4f3f8 !important;
  border-radius: 50% !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.space-header-pill .space-back-btn svg {
  width: 24px;
  height: 24px;
}

/* Dark mode for space pill header */
[data-theme="dark"] .chat-header.space-header-pill {
  background: #1a1a24 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .space-header-pill .space-title {
  color: #f0eff5 !important;
}

[data-theme="dark"] .space-header-pill .space-subtitle {
  color: #838099 !important;
}

[data-theme="dark"] .space-header-pill .header-circle-btn {
  background: #272735 !important;
}

[data-theme="dark"] .space-header-pill .header-circle-btn:hover {
  background: #323244 !important;
}

[data-theme="dark"] .space-header-pill .space-search-btn svg path {
  stroke: #f0eff5 !important;
}

[data-theme="dark"] .space-header-pill .space-back-btn svg path {
  stroke: #f0eff5 !important;
}

[data-theme="dark"] .space-header-pill .space-menu-btn svg circle {
  fill: #838099 !important;
}

[data-theme="dark"] .space-header-pill .space-avatar-wrap {
  background: #272735;
}

/* Парящая шапка обсуждения (Figma 435:1716) */
.chat-header.space-header-pill.discussion-header-pill {
  height: 55px !important;
  min-height: 55px !important;
  padding: 8px 10px !important;
}

.discussion-header-pill .discussion-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.discussion-header-pill .discussion-back-btn {
  display: flex !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  background: #f4f3f8 !important;
  border: 0 !important;
  cursor: pointer !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: background 0.15s ease, transform 0.1s ease !important;
}

.discussion-header-pill .discussion-back-btn:hover {
  background: #eae9f2 !important;
}

.discussion-header-pill .discussion-back-btn:active {
  transform: scale(0.94) !important;
}

.discussion-header-pill .discussion-header-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 4px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.discussion-header-pill .discussion-header-info .space-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 19px !important;
  color: #0b0a14 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: left !important;
}

.discussion-header-pill .discussion-header-info .space-subtitle {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  color: #4a4858 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: left !important;
}

.discussion-header-pill .discussion-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.discussion-header-pill .header-circle-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  background: #f4f3f8 !important;
  border: 0 !important;
  cursor: pointer !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: background 0.15s ease, transform 0.1s ease !important;
}

.discussion-header-pill .header-circle-btn:hover {
  background: #eae9f2 !important;
}

.discussion-header-pill .header-circle-btn:active {
  transform: scale(0.94) !important;
}

.discussion-header-pill .header-circle-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Dark theme for discussion pill header */
[data-theme="dark"] .chat-header.space-header-pill.discussion-header-pill {
  background: #1a1a24 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .discussion-header-pill .discussion-header-info .space-title {
  color: #f0eff5 !important;
}

[data-theme="dark"] .discussion-header-pill .discussion-header-info .space-subtitle {
  color: #838099 !important;
}

[data-theme="dark"] .discussion-header-pill .header-circle-btn {
  background: #272735 !important;
}

[data-theme="dark"] .discussion-header-pill .header-circle-btn:hover {
  background: #323244 !important;
}

[data-theme="dark"] .discussion-header-pill .discussion-back-btn svg path {
  stroke: #f0eff5 !important;
}

[data-theme="dark"] .discussion-header-pill .discussion-search-btn svg path {
  stroke: #f0eff5 !important;
}

[data-theme="dark"] .discussion-header-pill .discussion-menu-btn svg circle {
  fill: #838099 !important;
}

/* Сообщения в ленте (Figma 37:223 Frame 18) */
.chat-view .message-list{position:relative;z-index:1;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:6px 16px 84px 16px;box-sizing:border-box;width:100%;max-width:590px;margin:0 auto;scrollbar-width:none;-ms-overflow-style:none}
.chat-view .message-list::-webkit-scrollbar{display:none}

.post-card{width:100%;max-width:590px;background:#ffffff;border-radius:22px;overflow:hidden;box-shadow:0 4px 16px rgba(11,10,20,0.04);display:flex;flex-direction:column;box-sizing:border-box;flex-shrink:0;transition:transform 0.35s cubic-bezier(0.16,1,0.3,1),box-shadow 0.35s cubic-bezier(0.16,1,0.3,1),filter 0.35s cubic-bezier(0.16,1,0.3,1),opacity 0.35s cubic-bezier(0.16,1,0.3,1)}
.post-card-image-wrap:not(.tg-album-wrap){width:100%;padding:10px 10px 0 10px;box-sizing:border-box;display:block}
.post-card-img{width:100%;height:auto;max-height:none;object-fit:cover;display:block;border-radius:12px;margin:0;cursor:zoom-in;transition:opacity 0.15s ease}
.post-card-image-wrap:not(.tg-album-wrap) .post-card-img{width:100%;margin:0;border-radius:12px}
.post-card > .post-card-img{width:calc(100% - 20px);margin:10px 10px 0 10px;border-radius:12px}
.post-card-img:hover{opacity:0.96}
.post-card-image-wrap + .post-card-content,
.post-card > .post-card-img + .post-card-content{padding-top:6px}
.original-post-banner .post-card-image-wrap{padding:0 0 4px 0}
.post-inline-image-wrap{display:block;width:100%;margin:10px 0;border-radius:12px;overflow:hidden;box-sizing:border-box}
.post-inline-img{display:block;width:100%;height:auto;max-height:none;border-radius:12px;object-fit:cover;cursor:zoom-in;transition:opacity 0.15s ease}
.post-inline-img:hover{opacity:0.96}

/* Telegram Smart Photo Album (до 10 фото) */
.tg-album-wrap {
  width: 100%;
  box-sizing: border-box;
  display: block;
}
#chat-view .post-card > .post-card-image-wrap.tg-album-wrap,
#discussion-view .post-card > .post-card-image-wrap.tg-album-wrap,
.post-card > .post-card-image-wrap.tg-album-wrap,
.post-card-image-wrap.tg-album-wrap {
  padding: 10px 10px 0 10px !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
  border-radius: 0 !important;
}
.comment-image-wrap.tg-album-wrap {
  padding: 4px 0 6px 0;
  width: 100%;
}
.comment-image-wrap.tg-album-wrap .tg-photo-album {
  border-radius: 12px;
  overflow: hidden;
}
.post-inline-image-wrap.tg-album-wrap {
  margin: 10px 0;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}
.post-inline-image-wrap.tg-album-wrap .tg-photo-album {
  border-radius: 12px;
  overflow: hidden;
}
.original-post-banner .tg-photo-album {
  border-radius: 12px;
  overflow: hidden;
}

.tg-photo-album {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  width: 100% !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: #dfe3ea;
}
[data-theme="dark"] .tg-photo-album {
  background: #1c1c1f !important;
}

.tg-album-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 2px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
#chat-view .tg-album-item,
#discussion-view .tg-album-item,
.tg-album-item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: rgba(0, 0, 0, 0.04) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Guarantee NO inner rounded corners and 100% fit for album photos */
#chat-view .tg-photo-album img,
#discussion-view .tg-photo-album img,
#chat-view .tg-album-item img,
#discussion-view .tg-album-item img,
#chat-view .post-card-image-wrap .tg-album-item .post-card-img,
#discussion-view .post-card-image-wrap .tg-album-item .post-card-img,
#chat-view .tg-album-item .post-card-img,
#discussion-view .tg-album-item .post-card-img,
#chat-view .tg-album-item .comment-card-img,
#discussion-view .tg-album-item .comment-card-img,
#chat-view .tg-album-item .post-inline-img,
#discussion-view .tg-album-item .post-inline-img,
.tg-album-item .post-card-img,
.tg-album-item .comment-card-img,
.tg-album-item .post-inline-img,
.tg-album-item img {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  cursor: zoom-in;
  transition: opacity 0.15s ease, filter 0.15s ease;
}
.tg-album-item img:hover {
  opacity: 0.94;
}

/* Row heights based on photo count in row */
.tg-album-row-1 {
  height: 210px !important;
}
.tg-album-row-2 {
  height: 180px !important;
}
.tg-album-row-3 {
  height: 135px !important;
}
.tg-album-row-4 {
  height: 105px !important;
}

/* Specific total album tuning (Telegram proportions) */
.tg-album-count-2 .tg-album-row-2 {
  height: 220px !important;
}
.tg-album-count-4 .tg-album-row-2 {
  height: 175px !important;
}
.tg-album-count-5 .tg-album-row-1 {
  height: 210px !important;
}
.tg-album-count-5 .tg-album-row-2 {
  height: 180px !important;
}
.tg-album-count-6 .tg-album-row-3 {
  height: 160px !important;
}
.tg-album-count-10 .tg-album-row-3 {
  height: 130px !important;
}
.tg-album-count-10 .tg-album-row-4 {
  height: 105px !important;
}

/* Comments row heights */
.comment-card .tg-album-row-1 {
  height: 150px !important;
}
.comment-card .tg-album-row-2 {
  height: 120px !important;
}
.comment-card .tg-album-row-3 {
  height: 90px !important;
}
.comment-card .tg-album-row-4 {
  height: 75px !important;
}
.comment-card .tg-album-count-2 .tg-album-row-2 {
  height: 140px !important;
}

/* Compact content padding when post only contains timestamp */
#chat-view .post-card-content:has(.post-card-time.is-alone:only-child),
#discussion-view .post-card-content:has(.post-card-time.is-alone:only-child) {
  padding: 6px 14px 4px 14px !important;
}
#chat-view .post-card-content:has(.post-card-time.is-alone:only-child) .post-card-time.is-alone,
#discussion-view .post-card-content:has(.post-card-time.is-alone:only-child) .post-card-time.is-alone {
  margin: 0 !important;
  line-height: 16px;
}

@media (max-width: 600px) {
  .tg-album-row-1 {
    height: 165px !important;
  }
  .tg-album-row-2 {
    height: 140px !important;
  }
  .tg-album-count-2 .tg-album-row-2 {
    height: 175px !important;
  }
  .tg-album-count-4 .tg-album-row-2 {
    height: 135px !important;
  }
  .tg-album-count-5 .tg-album-row-1 {
    height: 165px !important;
  }
  .tg-album-count-5 .tg-album-row-2 {
    height: 140px !important;
  }
  .tg-album-count-6 .tg-album-row-3 {
    height: 125px !important;
  }
  .tg-album-row-3 {
    height: 105px !important;
  }
  .tg-album-row-4 {
    height: 85px !important;
  }
}

.post-card-content{padding:12px 12px 10px 12px;display:flex;flex-direction:column;gap:4px;box-sizing:border-box}
.post-card-title,
.post-heading,
.post-card-text h1,
.post-card-text h2,
.post-card-text h3{margin:0;font-family:'Inter',sans-serif;font-size:16px;font-weight:500;line-height:20px;color:#0b0a14;display:flow-root}
.post-card-text .post-heading,.post-card-text h1,.post-card-text h2,.post-card-text h3{margin-top:5px;margin-bottom:2px}
.post-card-text .post-heading:first-child,.post-card-text h1:first-child,.post-card-text h2:first-child,.post-card-text h3:first-child{margin-top:0;margin-bottom:3px}
.post-card-text .post-heading:only-child,.post-card-text .post-card-title:only-child{margin-bottom:0}
.post-heading .post-card-time,.post-card-title .post-card-time{margin-top:3px}
.comment-card-text .post-heading .comment-card-time{margin-top:2px}
.post-card-title strong,.post-heading strong,.post-card-title em,.post-heading em,.post-card-title u,.post-heading u{color:inherit}
.post-card-text u,.post-compact-text u,.post-card-title u,.post-heading u{text-decoration:underline}
[data-theme="dark"] .post-card-title,
[data-theme="dark"] .post-heading,
[data-theme="dark"] .post-card-text h1,
[data-theme="dark"] .post-card-text h2,
[data-theme="dark"] .post-card-text h3{color:#eef0e9}
.post-card-text{font-family:'Inter',sans-serif;font-size:14px;font-weight:400;line-height:20px;color:#4a4858;white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;margin:0;display:flow-root}
[data-theme="dark"] .post-card-text{color:var(--text-primary)}
[data-theme="dark"] .post-card-time{color:var(--text-secondary)}
.post-card-text a,
.post-compact-text a,
.comment-card-text a,
.original-post-content a,
.composer-rich-editor a,
.message-input a,
.post-link {
  color: #2850d1;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  word-break: break-all;
  transition: color 0.15s ease, opacity 0.15s ease;
  position: relative;
  z-index: 2;
}
.post-card-text a:hover,
.post-compact-text a:hover,
.comment-card-text a:hover,
.original-post-content a:hover,
.composer-rich-editor a:hover,
.message-input a:hover,
.post-link:hover {
  color: #1e3fa8;
  opacity: 0.85;
}
[data-theme="dark"] .post-card-text a,
[data-theme="dark"] .post-compact-text a,
[data-theme="dark"] .comment-card-text a,
[data-theme="dark"] .original-post-content a,
[data-theme="dark"] .composer-rich-editor a,
[data-theme="dark"] .message-input a,
[data-theme="dark"] .post-link {
  color: #8fa5f5;
}
[data-theme="dark"] .post-card-text a:hover,
[data-theme="dark"] .post-compact-text a:hover,
[data-theme="dark"] .comment-card-text a:hover,
[data-theme="dark"] .original-post-content a:hover,
[data-theme="dark"] .composer-rich-editor a:hover,
[data-theme="dark"] .message-input a:hover,
[data-theme="dark"] .post-link:hover {
  color: #b3c2f9;
}
.post-card-text strong,.post-compact-text strong{font-weight:600;color:inherit}
.post-card-text em,.post-compact-text em{font-style:italic}
.post-card-text code.inline-code,.post-compact-text code.inline-code{background:rgba(40,80,209,0.08);padding:2px 6px;border-radius:4px;font-family:monospace;font-size:0.9em}
.post-card-text blockquote.post-quote,.post-compact-text blockquote.post-quote{border-left:3px solid var(--accent);margin:6px 0;padding-left:10px;color:var(--text-secondary);font-style:italic}
.post-card-time{float:right;font-family:'Inter',sans-serif;font-size:12px;font-weight:500;line-height:14px;color:#838099;margin-left:8px;margin-top:6px;white-space:nowrap;user-select:none}
.post-card-time.is-alone{float:none;display:block;text-align:right;margin:0 0 6px}
.post-card-footer{height:51px;border-top:1px solid rgba(0,0,0,0.05);display:flex;align-items:center;justify-content:space-between;padding:10px 6px 10px 12px;box-sizing:border-box;background:#ffffff;border-bottom-left-radius:22px;border-bottom-right-radius:22px;cursor:pointer;transition:background-color .15s ease;user-select:none;margin-top:0}
.post-card-footer:hover{background-color:#f8f8fc}
.post-card-footer span{font-family:'Inter',sans-serif;font-size:14px;font-weight:500;line-height:16px;color:#657fd3}
.post-card-footer svg{display:block;width:30px;height:30px}

.post-compact{align-self:flex-start;width:auto;min-width:229px;max-width:calc(100% - 20px);background:#ffffff;border-radius:22px;overflow:hidden;box-shadow:0 4px 16px rgba(11,10,20,0.04);display:flex;flex-direction:column;justify-content:space-between;gap:8px;padding:12px 0 0 0;box-sizing:border-box;flex-shrink:0;cursor:pointer;transition:transform 0.15s ease,box-shadow 0.15s ease}
.post-compact:hover{box-shadow:0 6px 20px rgba(11,10,20,0.07)}
.post-compact-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:0 12px 6px 12px;min-height:25px;width:100%;box-sizing:border-box}
.post-compact-text{font-family:'Inter',sans-serif;font-size:14px;font-weight:400;line-height:19px;color:#4a4858;white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;flex:1;min-width:0}
.post-compact-time{font-family:'Inter',sans-serif;font-size:12px;font-weight:500;line-height:14px;color:#4a4858;white-space:nowrap;flex-shrink:0;user-select:none;margin-top:3px}
.post-compact-footer{height:43px;min-height:43px;width:100%;border-top:1px solid rgba(0,0,0,0.05);padding:0 6px 0 12px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;background:#ffffff;border-bottom-left-radius:22px;border-bottom-right-radius:22px;cursor:pointer;transition:background-color .15s ease;user-select:none}
.post-compact-footer:hover{background-color:#f8f8fc}
.post-compact-footer span{font-family:'Inter',sans-serif;font-size:14px;font-weight:500;line-height:16px;color:#657fd3}
.post-compact-footer svg{display:block;width:30px;height:30px;flex-shrink:0}
[data-theme="dark"] .post-compact{background:var(--surface);box-shadow:0 4px 16px rgba(0,0,0,0.2)}
[data-theme="dark"] .post-card,
[data-theme="dark"] #chat-view .post-card,
[data-theme="dark"] #discussion-view .post-card,
[data-theme="dark"] #chat-view .post-compact{background:var(--surface);box-shadow:0 4px 16px rgba(0,0,0,0.2)}
[data-theme="dark"] .post-card-footer{background:var(--surface);border-top:1px solid var(--border)}
[data-theme="dark"] .post-card-footer:hover{background-color:var(--surface-secondary)}
[data-theme="dark"] .post-compact-text{color:var(--text-primary)}
[data-theme="dark"] .post-compact-time{color:var(--text-secondary)}
[data-theme="dark"] .post-compact-footer{background:var(--surface);border-top:1px solid var(--border)}
[data-theme="dark"] .post-compact-footer:hover{background-color:var(--surface-secondary)}

/* Кнопка обсуждения и плавная циклическая анимация непрочитанных комментариев (Figma 47:605, 364:1720, 380:1733) */
.discuss-ticker {
  position: relative;
  display: flex;
  align-items: center;
  height: 18px;
  min-height: 18px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.discuss-ticker-item {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  color: #657fd3;
  pointer-events: none;
  will-change: transform, opacity;
}

.has-unread-comments .discuss-ticker-unread {
  animation: tickerCycleUnread 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.has-unread-comments .discuss-ticker-default {
  animation: tickerCycleDefault 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes tickerCycleUnread {
  0%, 44% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0;
    transform: translateY(-6px);
  }
  94% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tickerCycleDefault {
  0%, 46% {
    opacity: 0;
    transform: translateY(6px);
  }
  52%, 90% {
    opacity: 1;
    transform: translateY(0);
  }
  96%, 100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}
.original-post-banner{width:100%;max-width:100%;align-self:stretch;background:#ffffff;box-shadow:0 4px 16px rgba(11,10,20,0.04);border-radius:22px;padding:12px 14px;border:1px solid rgba(101,127,211,0.2);display:flex;flex-direction:column;gap:6px;box-sizing:border-box;flex-shrink:0}
.original-post-label{font-family:'Inter',sans-serif;font-size:11px;font-weight:500;color:#657fd3;text-transform:uppercase;letter-spacing:0.05em}
.original-post-title{font-family:'Inter',sans-serif;font-size:15px;font-weight:600;line-height:20px;color:#0b0a14;margin:0}
.original-post-content{font-family:'Inter',sans-serif;font-size:14px;color:#0b0a14;line-height:1.4;white-space:pre-wrap;word-break:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
[data-theme="dark"] .original-post-banner{background:var(--surface);border-color:rgba(101,127,211,0.35);box-shadow:0 4px 16px rgba(0,0,0,0.2)}
[data-theme="dark"] .original-post-title,
[data-theme="dark"] .original-post-content{color:#eef0e9}
/* Comment cards - user and AI replies (Figma 447:1729 & 459:1804) */
.comment-card {
  position: relative;
  width: fit-content;
  max-width: 88%;
  min-width: 130px;
  border-radius: 18px;
  padding: 10px 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(11, 10, 20, 0.03);
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}
.comment-card.comment-card-user {
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 9px !important;
  background: #606cb2 !important;
  border: none !important;
  border-radius: 18px 18px 4px 18px;
  padding: 10px 14px;
  gap: 6px;
  box-shadow: 0 4px 16px rgba(96, 108, 178, 0.25);
  color: #f4f3f8;
}

/* User adaptive grouping corners (Telegram style) */
.comment-card.comment-card-user.is-group-single {
  border-radius: 18px 18px 0 18px !important;
}
.comment-card.comment-card-user.is-group-first {
  border-radius: 18px 18px 4px 18px !important;
}
.comment-card.comment-card-user.is-group-middle {
  border-radius: 18px 4px 4px 18px !important;
  margin-top: -5px !important;
}
.comment-card.comment-card-user.is-group-last {
  border-radius: 18px 4px 0 18px !important;
  margin-top: -5px !important;
}

/* Telegram Speech Bubble Tail for outgoing user message (Right) */
.comment-card.comment-card-user .comment-bubble-tail {
  position: absolute;
  right: -9px;
  bottom: 0;
  width: 11px;
  height: 20px;
  pointer-events: none;
  color: #606cb2;
  fill: currentColor;
}

.comment-card.comment-card-user .comment-card-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #f4f3f8;
}
.comment-card.comment-card-user .comment-card-time {
  float: right;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  color: #f4f3f8;
  opacity: 0.85;
  margin-left: 8px;
  margin-top: 5px;
  white-space: nowrap;
  user-select: none;
}
.comment-card.comment-card-user a,
.comment-card.comment-card-user .comment-card-text a {
  color: #ffffff !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.comment-card.comment-card-user a:hover,
.comment-card.comment-card-user .comment-card-text a:hover {
  color: #e2e7ff !important;
}
.comment-card.comment-card-user code.inline-code,
.comment-card.comment-card-user .comment-card-text code.inline-code {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}
.comment-card.comment-card-user blockquote.post-quote {
  border-left-color: rgba(255, 255, 255, 0.5) !important;
  color: rgba(244, 243, 248, 0.9) !important;
}
.comment-card.comment-card-user strong {
  color: #ffffff;
}
[data-theme="dark"] .comment-card.comment-card-user {
  background: #606cb2 !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .comment-card.comment-card-user .comment-card-text {
  color: #f4f3f8;
}
[data-theme="dark"] .comment-card.comment-card-user .comment-card-time {
  color: #f4f3f8;
  opacity: 0.85;
}
[data-theme="dark"] .comment-card.comment-card-user .comment-bubble-tail {
  color: #606cb2 !important;
  fill: currentColor !important;
}
.comment-card.comment-card-user.is-context-selected .comment-bubble-tail {
  color: #606cb2 !important;
  fill: currentColor !important;
}

/* AI comment card: white (#ffffff) with adaptive Telegram corners and Tail */
.comment-card.comment-card-ai {
  align-self: flex-start !important;
  margin-right: auto !important;
  margin-left: 9px !important;
  background: #ffffff !important;
  border: none !important;
  border-radius: 18px 18px 18px 0;
  padding: 10px 14px;
  gap: 6px;
  box-shadow: 0 2px 10px rgba(11, 10, 20, 0.03);
  color: #0b0a14;
}
.comment-card.comment-card-ai.is-group-single {
  border-radius: 18px 18px 18px 0 !important;
}
.comment-card.comment-card-ai.is-group-first {
  border-radius: 18px 18px 18px 4px !important;
}
.comment-card.comment-card-ai.is-group-middle {
  border-radius: 4px 18px 18px 4px !important;
  margin-top: -5px !important;
}
.comment-card.comment-card-ai.is-group-last {
  border-radius: 4px 18px 18px 0 !important;
  margin-top: -5px !important;
}

/* Telegram Speech Bubble Tail for incoming AI message (Left) */
.comment-card.comment-card-ai .comment-bubble-tail {
  position: absolute;
  left: -9px;
  bottom: 0;
  width: 11px;
  height: 20px;
  pointer-events: none;
  color: #ffffff;
  fill: currentColor;
}
.comment-card.comment-card-ai .comment-bubble-tail-outline {
  display: none !important;
}
[data-theme="dark"] .comment-card.comment-card-ai .comment-bubble-tail {
  color: var(--surface, #1a1926) !important;
  fill: currentColor !important;
}
[data-theme="dark"] .comment-card.comment-card-ai .comment-bubble-tail-outline {
  stroke: rgba(255, 255, 255, 0.08) !important;
}
.comment-card.comment-card-ai.is-context-selected .comment-bubble-tail {
  color: #ffffff !important;
  fill: currentColor !important;
}
[data-theme="dark"] .comment-card.comment-card-ai.is-context-selected .comment-bubble-tail {
  color: var(--surface, #1a1926) !important;
  fill: currentColor !important;
}
.comment-ai-header {
  width: 100%;
  padding-bottom: 4px;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(11, 10, 20, 0.08);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 6px;
}
.comment-ai-name {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #0b0a14;
  line-height: 19px;
  display: inline-block;
}
.comment-ai-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: inline-block;
}
.comment-ai-icon {
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #606cb2;
}
.comment-card.comment-card-ai .comment-card-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #0b0a14;
}
.comment-card.comment-card-ai .comment-card-time {
  float: right;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  color: #838099;
  margin-left: 8px;
  margin-top: 6px;
  white-space: nowrap;
  user-select: none;
}
.comment-card.comment-card-ai a,
.comment-card.comment-card-ai .comment-card-text a {
  color: #2850d1 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.comment-card.comment-card-ai a:hover,
.comment-card.comment-card-ai .comment-card-text a:hover {
  color: #1e3fa8 !important;
}
.comment-card.comment-card-ai code.inline-code,
.comment-card.comment-card-ai .comment-card-text code.inline-code {
  background: rgba(40, 80, 209, 0.08) !important;
  color: #2850d1 !important;
}
.comment-card.comment-card-ai blockquote.post-quote {
  border-left-color: var(--accent) !important;
  color: var(--text-secondary) !important;
}
.comment-card.comment-card-ai strong {
  color: #0b0a14;
}
[data-theme="dark"] .comment-card.comment-card-ai {
  background: var(--surface, #1a1926) !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  color: #eef0e9;
}
[data-theme="dark"] .comment-card.comment-card-ai .comment-ai-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .comment-card.comment-card-ai .comment-ai-name {
  color: #eef0e9;
}
[data-theme="dark"] .comment-card.comment-card-ai .comment-card-text {
  color: #eef0e9;
}
[data-theme="dark"] .comment-card.comment-card-ai .comment-card-time {
  color: var(--text-secondary, #838099);
}
[data-theme="dark"] .comment-card.comment-card-ai a,
[data-theme="dark"] .comment-card.comment-card-ai .comment-card-text a {
  color: #8fa5f5 !important;
}
[data-theme="dark"] .comment-card.comment-card-ai strong {
  color: #eef0e9;
}

/* Image inside comment */
.comment-card .comment-image-wrap {
  width: 100%;
  padding: 4px 0 6px 0;
  box-sizing: border-box;
}
.comment-card .comment-card-img {
  max-height: 260px;
  width: 100%;
  object-fit: cover;
  border-radius: 12px;
  cursor: pointer;
  display: block;
}
.comment-card:has(.comment-image-wrap) {
  width: 88%;
  max-width: min(88%, 420px);
}

.comment-card-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  white-space: pre-wrap;
  word-break: break-word;
  display: flow-root;
}
.comment-card-time {
  float: right;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  margin-left: 8px;
  margin-top: 5px;
  white-space: nowrap;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: baseline;
}
.tg-status-checks {
  display: inline-flex;
  align-items: center;
  color: currentColor;
  opacity: 0.9;
  flex-shrink: 0;
  line-height: 1;
}
.tg-status-checks svg {
  display: block;
  width: 16px;
  height: 11px;
}

/* AI typing indicator: white (#ffffff) */
.ai-typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #ffffff;
  border: 1px solid rgba(11, 10, 20, 0.06);
  border-radius: 18px;
  align-self: flex-start !important;
  margin-right: auto !important;
  margin-left: 0 !important;
  margin-top: 4px;
  animation: aiFadeIn 0.3s ease;
  box-shadow: 0 2px 10px rgba(11, 10, 20, 0.03);
  color: #0b0a14;
}
.ai-typing-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #606cb2;
}
.ai-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.ai-typing-dots span {
  width: 5px;
  height: 5px;
  background: #606cb2;
  border-radius: 50%;
  animation: aiBounce 1.4s infinite ease-in-out both;
}
.ai-typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.ai-typing-dots span:nth-child(2) { animation-delay: -0.16s; }
.ai-typing-dots span:nth-child(3) { animation-delay: 0s; }
.ai-typing-text {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #838099;
  opacity: 1;
}
[data-theme="dark"] .ai-typing-indicator {
  background: var(--surface, #1a1926);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  color: #eef0e9;
}
[data-theme="dark"] .ai-typing-badge {
  color: #8fa5f5;
}
[data-theme="dark"] .ai-typing-dots span {
  background: #8fa5f5;
}
[data-theme="dark"] .ai-typing-text {
  color: var(--text-secondary, #838099);
}
@keyframes aiBounce{0%,80%,100%{transform:scale(0);opacity:0.4}40%{transform:scale(1);opacity:1}}
@keyframes aiFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.edit-post-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 10, 20, 0.46);
  z-index: 18;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.edit-post-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}
.edit-post-backdrop.hidden {
  display: none !important;
}

body.is-post-menu-open .chat-view .message-list,
body.is-post-menu-open #chat-view .message-list,
body.is-post-menu-open .message-list {
  z-index: 1505 !important;
}

body.is-post-menu-open .chat-header {
  opacity: 0.25;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

body.is-post-menu-open .message-list > *:not(.is-context-selected) {
  opacity: 0.22 !important;
  transform: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  will-change: opacity;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
}

@keyframes postPopOut {
  0% {
    transform: scale(1) translateY(0);
    box-shadow: 0 4px 16px rgba(11, 10, 20, 0.04);
  }
  100% {
    transform: scale(1.02) translateY(-2px);
    box-shadow: 0 16px 44px rgba(11, 10, 20, 0.18), 0 4px 14px rgba(11, 10, 20, 0.06);
  }
}

/* ==========================================================================
   Dissipation / Evaporation Animation for Deleting Posts & Comments (1s static)
   ========================================================================== */
@keyframes itemDissipate {
  0% {
    opacity: 1;
    filter: blur(0px) brightness(1);
  }
  35% {
    opacity: 0.7;
    filter: blur(6px) brightness(1.04);
  }
  70% {
    opacity: 0.25;
    filter: blur(14px) brightness(1.08);
  }
  100% {
    opacity: 0;
    filter: blur(24px) brightness(1.12);
  }
}

.item-dissipating,
.item-dissipating * {
  transition: none !important;
  pointer-events: none !important;
  user-select: none !important;
}

.item-dissipating {
  animation: itemDissipate 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important;
  pointer-events: none !important;
  transform: none !important;
  will-change: opacity, filter !important;
  border-color: transparent !important;
  box-shadow: none !important;
  min-height: 0 !important;
  flex-shrink: 0 !important;
}

/* Highlight the post currently selected in context menu above the blur overlay */
.post-card.is-context-selected,
.post-compact.is-context-selected,
.comment-card.is-context-selected,
.message-list > .is-context-selected {
  position: relative !important;
  z-index: 1510 !important;
  filter: none !important;
  opacity: 1 !important;
  animation: postPopOut 0.35s cubic-bezier(0.2, 0.8, 0.25, 1) forwards !important;
  pointer-events: auto !important;
  will-change: transform, box-shadow;
}
[data-theme="dark"] .post-card.is-context-selected,
[data-theme="dark"] .post-compact.is-context-selected,
[data-theme="dark"] .message-list > .is-context-selected {
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.7), 0 4px 16px rgba(0, 0, 0, 0.45) !important;
}

.composer-backdrop{position:absolute;inset:0;background:rgba(11,10,20,0.3);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:40;opacity:0;pointer-events:none;transition:opacity .25s cubic-bezier(0.16,1,0.3,1)}
.composer-backdrop.active{opacity:1;pointer-events:auto}
.composer-backdrop.hidden{display:none!important}
.chat-view .composer{position:absolute;bottom:calc(20px + env(safe-area-inset-bottom, 0px));left:20px;right:20px;width:auto;max-width:none;transform:none;z-index:30;display:flex;flex-direction:column;align-items:stretch;box-sizing:border-box;padding:0;border:0;background:transparent}
.chat-view .composer.expanded,.chat-view .composer.collapsing{top:65px;bottom:0;left:0;right:0;width:100%;height:calc(100% - 65px);max-height:none;z-index:60;border-radius:22px 22px 0 0;transition:none!important}
.composer-bar{position:relative;min-height:58px;height:auto;background:#ffffff;border:1px solid rgba(255,255,255,0.8);border-radius:9999px;box-shadow:0 8px 24px rgba(11,10,20,0.08);display:flex;align-items:center;padding:10px 10px;gap:8px;box-sizing:border-box;width:100%;transition:none!important}
[data-theme="dark"] .composer-bar{background:var(--surface);border-color:var(--border);box-shadow:0 8px 24px rgba(0,0,0,0.25)}
.composer.multiline .composer-bar,.composer.has-attachment .composer-bar{min-height:58px;height:auto;border-radius:26px;align-items:flex-end;padding:10px 10px;transition:none!important}
.composer.expanded .composer-bar,.composer.collapsing .composer-bar{height:100%;min-height:0;border-radius:22px 22px 0 0;border:1px solid rgba(255,255,255,0.8);box-shadow:0 8px 32px rgba(11,10,20,0.12);display:flex;flex-direction:column;align-items:stretch;padding:10px 10px 8px 10px;position:relative;overflow:hidden;transition:none!important}

/* Top drag handle (Figma 281:2322) */
.composer-drag-handle{display:none;align-items:center;justify-content:center;width:100%;height:18px;min-height:18px;cursor:grab;touch-action:none;flex-shrink:0;padding:4px 0 6px 0;box-sizing:border-box}
.composer.expanded .composer-drag-handle,.composer.collapsing .composer-drag-handle{display:flex}
.composer-drag-bar{width:83px;height:4px;border-radius:12px;background:#838099;flex-shrink:0}
[data-theme="dark"] .composer-drag-bar{background:#9a9f94}

/* Collapsed mode content wrapper */
.composer-collapsed-content{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box}
.composer.expanded .composer-collapsed-content{display:none!important}
.composer.collapsing .composer-collapsed-content{display:flex;opacity:0;pointer-events:none;position:absolute}

/* Expanded 2-column body (Figma Frame 21: Frame 22 + Frame 65) */
.composer-expanded-body{display:none;flex-direction:row;flex:1;min-height:0;width:100%;gap:12px;box-sizing:border-box}
.composer.expanded .composer-expanded-body,.composer.collapsing .composer-expanded-body{display:flex}

/* Left Column: text editor on top + pill toolbar on bottom */
.composer-left-col{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;justify-content:space-between;gap:10px;box-sizing:border-box}

/* Right Column: collapse cross on top + send button on bottom */
.composer-right-col{width:36px;min-width:36px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;flex-shrink:0;padding-bottom:8px;box-sizing:border-box}

.attach-btn{position:relative;overflow:hidden;width:30px;height:30px;min-width:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:transparent;border:0;cursor:pointer;padding:0;flex-shrink:0;align-self:flex-end;margin-bottom:3px;transition:opacity .15s ease,transform .1s ease}
.attach-btn:hover{opacity:0.8}
.attach-btn:active{transform:scale(0.95)}
.attach-btn svg{display:block;width:30px;height:30px}
[data-theme="dark"] .attach-btn svg path{stroke:var(--text-secondary)}

.composer-file-input{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:100%!important;opacity:0!important;cursor:pointer!important;z-index:5!important;display:block!important;padding:0!important;margin:0!important;border:0!important;pointer-events:auto!important;font-size:0!important}

#message-input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-family:'Inter',sans-serif;font-size:14px;font-weight:400;line-height:20px;min-height:36px;max-height:120px;height:auto;color:#4a4858;padding:8px 4px;margin:0;box-sizing:border-box;overflow-y:auto;word-break:break-word;white-space:pre-wrap;align-self:center;position:relative;scrollbar-width:none;-ms-overflow-style:none;transition:none!important}
#message-input::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
#discussion-input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-family:'Inter',sans-serif;font-size:14px;font-weight:400;line-height:20px;height:20px;min-height:20px;max-height:120px;color:#4a4858;resize:none;padding:0 4px;margin:0;box-sizing:border-box;overflow:hidden;vertical-align:middle;word-break:break-word;white-space:pre-wrap;scrollbar-width:none;-ms-overflow-style:none;transition:none!important}
#discussion-input::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
[data-theme="dark"] #message-input,[data-theme="dark"] #discussion-input{color:var(--text-primary)}
#message-input::placeholder,#discussion-input::placeholder{color:#838099;opacity:1;line-height:20px}
#message-input:empty::before,
#message-input[data-empty="true"]::before{content:attr(data-placeholder);color:#838099;pointer-events:none;position:absolute;left:4px;top:8px;right:4px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#message-input:not([data-empty="true"]):not(:empty)::before{display:none!important}
#discussion-input:empty::before,#discussion-input[data-empty="true"]::before{content:attr(data-placeholder);color:#838099;pointer-events:none;display:block}
.composer.multiline #message-input,.composer.multiline #discussion-input{overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
.composer.multiline #message-input::-webkit-scrollbar,.composer.multiline #discussion-input::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}

/* Rich text editor in expanded state (WYSIWYG, Figma 268:1499) */
.composer-editor-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
}

.composer-title-input {
  display: none;
  width: 100%;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  color: #0b0a14;
  padding: 2px 4px 6px 4px;
  margin: 0;
  box-sizing: border-box;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent !important;
  transition: color 0.15s ease;
}
.composer.expanded .composer-title-input,
.composer.collapsing .composer-title-input {
  display: block;
}
.composer-title-input:focus,
.composer-title-input:focus-visible,
.composer-title-input:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
.composer-title-input::placeholder {
  color: #838099;
  opacity: 1;
  font-weight: 600;
}
[data-theme="dark"] .composer-title-input {
  color: #ffffff;
}
[data-theme="dark"] .composer-title-input::placeholder {
  color: #838099;
  opacity: 1;
}

.composer-rich-editor{display:none}
.composer.expanded .composer-rich-editor,.composer.collapsing .composer-rich-editor{display:block;flex:1;min-height:0;width:100%;padding:2px 4px;overflow-y:auto;outline:0;border:0;background:transparent;font-family:'Inter',sans-serif;font-size:14px;line-height:20px;color:#4a4858;word-break:break-word;white-space:pre-wrap;box-sizing:border-box;scrollbar-width:none;-ms-overflow-style:none}
.composer.expanded .composer-rich-editor::-webkit-scrollbar,.composer.collapsing .composer-rich-editor::-webkit-scrollbar{display:none}
[data-theme="dark"] .composer.expanded .composer-rich-editor,[data-theme="dark"] .composer.collapsing .composer-rich-editor{color:var(--text-primary)}
.composer.expanded .composer-rich-editor:empty:before,
.composer.expanded .composer-rich-editor[data-empty="true"]:before,
.composer.collapsing .composer-rich-editor:empty:before,
.composer.collapsing .composer-rich-editor[data-empty="true"]:before{content:attr(data-placeholder);color:#838099;pointer-events:none;display:block}
.composer.expanded .composer-rich-editor:not([data-empty="true"]):not(:empty):before,
.composer.collapsing .composer-rich-editor:not([data-empty="true"]):not(:empty):before{display:none!important}
.composer.expanded .composer-rich-editor h1,
.composer.collapsing .composer-rich-editor h1,
.composer.expanded .composer-rich-editor h2,
.composer.collapsing .composer-rich-editor h2,
.composer.expanded .composer-rich-editor h3,
.composer.collapsing .composer-rich-editor h3 {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  color: #0B0A14;
  margin: 2px 0 4px 0;
}
[data-theme="dark"] .composer.expanded .composer-rich-editor h1,
[data-theme="dark"] .composer.collapsing .composer-rich-editor h1,
[data-theme="dark"] .composer.expanded .composer-rich-editor h2,
[data-theme="dark"] .composer.collapsing .composer-rich-editor h2,
[data-theme="dark"] .composer.expanded .composer-rich-editor h3,
[data-theme="dark"] .composer.collapsing .composer-rich-editor h3 {
  color: #ffffff;
}
.composer.expanded .composer-rich-editor strong,.composer.expanded .composer-rich-editor b,.composer.collapsing .composer-rich-editor strong,.composer.collapsing .composer-rich-editor b{font-weight:600;color:inherit}
.composer.expanded .composer-rich-editor em,.composer.expanded .composer-rich-editor i,.composer.collapsing .composer-rich-editor em,.composer.collapsing .composer-rich-editor i{font-style:italic}
.composer.expanded .composer-rich-editor u,.composer.collapsing .composer-rich-editor u{text-decoration:underline}

/* Collapse button at top of right column (Figma 268:1501) */
.composer-collapse-btn{display:none;width:24px;height:24px;min-width:24px;min-height:24px;background:transparent;border:0;padding:0;margin:0;cursor:pointer;border-radius:6px;color:#4a4858;align-items:center;justify-content:center;transition:background-color .15s ease,transform .1s ease}
.composer-collapse-btn:hover{background:rgba(74,72,88,0.08)}
.composer-collapse-btn:active{transform:scale(0.92)}
.composer-collapse-btn svg{display:block;width:24px;height:24px}
.composer.expanded .composer-collapse-btn,.composer.collapsing .composer-collapse-btn{display:flex}
[data-theme="dark"] .composer-collapse-btn{color:var(--text-secondary)}

.composer-scrollbar-track{display:none;flex:1;width:36px;min-height:40px;position:relative;margin:6px 0;pointer-events:auto;cursor:pointer;touch-action:none}
.composer.expanded .composer-scrollbar-track,.composer.collapsing .composer-scrollbar-track{display:flex;justify-content:center}
.composer-scrollbar-thumb{width:4px;height:118px;min-height:36px;background:#838099;opacity:0;border-radius:4px;position:absolute;top:0;left:16px;transition:opacity .2s ease,transform .05s linear;pointer-events:auto}
.composer-scrollbar-thumb.visible{opacity:0.5}
[data-theme="dark"] .composer-scrollbar-thumb{background:#9a9f94}

/* Collapsed actions column */
.composer-actions{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;flex-shrink:0;width:78px;min-width:78px;max-width:78px;height:36px;min-height:36px;gap:6px;align-self:flex-end;margin-bottom:2px;transition:none!important}
.composer.multiline .composer-actions,.composer.has-attachment .composer-actions{display:flex;flex-direction:row;width:78px;min-width:78px;max-width:78px;height:36px;min-height:36px;justify-content:flex-end;align-self:flex-end;gap:6px;margin-bottom:2px;transition:none!important}
.composer-expand-btn{display:flex;position:relative;width:36px;height:36px;min-width:36px;min-height:36px;background:transparent;border:0;padding:0;margin:0;cursor:pointer;align-items:center;justify-content:center;border-radius:50%;transition:background-color .15s ease,transform .1s ease;color:#4a4858;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.composer-expand-btn::before{content:'';position:absolute;inset:-8px -10px -8px -10px;pointer-events:auto}
.composer-expand-btn:hover{background:rgba(74,72,88,0.08)}
.composer-expand-btn:active{transform:scale(0.92)}
[data-theme="dark"] .composer-expand-btn{color:var(--text-secondary)}
.composer.expanded .composer-expand-btn,.composer.collapsing .composer-expand-btn{display:none!important}
.composer-expand-btn .icon-expand{display:block;width:24px;height:24px}

/* Send & Voice action button (Figma Frame 7: 36x36, #2850d1) */
.composer-send-btn {
  position: relative;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 30px;
  border: 0;
  background: #2850d1;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color .15s ease, transform .15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .15s ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.composer-send-btn:hover { background: #1e3fa8; }
.composer-send-btn:active { transform: scale(0.92); }
.composer-send-btn .btn-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.composer-send-btn.is-voice-mode .icon-mic {
  opacity: 1;
  transform: scale(1);
}
.composer-send-btn.is-voice-mode .icon-send {
  opacity: 0;
  transform: scale(0.4) rotate(-30deg);
}
.composer-send-btn.is-send-mode .icon-mic {
  opacity: 0;
  transform: scale(0.4) rotate(30deg);
}
.composer-send-btn.is-send-mode .icon-send {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.composer-send-btn.is-recording {
  background: #2850d1 !important;
  color: #ffffff !important;
  transform: scale(1.06) !important;
  box-shadow: 0 4px 14px rgba(40, 80, 209, 0.4) !important;
}
.composer-send-btn.is-recording .icon-mic {
  opacity: 0 !important;
  transform: scale(0.4) rotate(30deg) !important;
}
.composer-send-btn.is-recording .icon-send {
  opacity: 1 !important;
  transform: scale(1) rotate(0deg) !important;
}
  50% { box-shadow: 0 0 0 9px rgba(229, 57, 53, 0.38); }
}

.composer-pill-toolbar{height:52px;min-height:52px;max-height:52px;background:#f4f3f8;border-radius:9999px;padding:8px 12px 8px 10px;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;flex:0 0 52px;min-width:0;width:auto;max-width:none}
[data-theme="dark"] .composer-pill-toolbar{background:#242432}

.composer-pill-btn{position:relative;overflow:hidden;width:28px;height:28px;min-width:28px;min-height:28px;border-radius:8px;border:0;background:transparent;color:#0b0a14;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;flex-shrink:0;transition:background-color .15s ease,color .15s ease,transform .1s ease}
@media (hover: hover) and (pointer: fine) {
  .composer-pill-btn:hover{background:rgba(40,80,209,0.08);color:#2850d1}
}
.composer-pill-btn:active{transform:scale(0.92)}
.composer-pill-btn.active{background:rgba(40,80,209,0.14);color:#2850d1;font-weight:600}
[data-theme="dark"] .composer-pill-btn{color:var(--text-primary)}
@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] .composer-pill-btn:hover{background:rgba(101,127,211,0.16);color:#657fd3}
}
[data-theme="dark"] .composer-pill-btn.active{background:rgba(101,127,211,0.24);color:#657fd3}
.composer-pill-btn svg{display:block;width:24px;height:24px}

/* Кнопка скрепки без заливки (Figma 268:1509) */
#composer-pill-attach,
#composer-pill-attach:hover,
#composer-pill-attach:active,
#composer-pill-attach:focus,
#composer-pill-attach:focus-within,
#composer-pill-attach.active,
[data-theme="dark"] #composer-pill-attach,
[data-theme="dark"] #composer-pill-attach:hover,
[data-theme="dark"] #composer-pill-attach:active,
[data-theme="dark"] #composer-pill-attach:focus,
[data-theme="dark"] #composer-pill-attach:focus-within,
[data-theme="dark"] #composer-pill-attach.active {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: #0b0a14 !important;
}
[data-theme="dark"] #composer-pill-attach,
[data-theme="dark"] #composer-pill-attach:hover,
[data-theme="dark"] #composer-pill-attach:active,
[data-theme="dark"] #composer-pill-attach:focus,
[data-theme="dark"] #composer-pill-attach:focus-within,
[data-theme="dark"] #composer-pill-attach.active {
  color: var(--text-primary) !important;
}

/* Кнопка H1 без заливки (Figma Frame 67 / 270:2050) */
.composer-pill-btn[data-tool="h1"],
.composer-pill-btn[data-tool="h1"]:hover,
.composer-pill-btn[data-tool="h1"]:active,
.composer-pill-btn[data-tool="h1"].active,
[data-theme="dark"] .composer-pill-btn[data-tool="h1"],
[data-theme="dark"] .composer-pill-btn[data-tool="h1"]:hover,
[data-theme="dark"] .composer-pill-btn[data-tool="h1"].active {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.composer-pill-btn[data-tool="h1"].active {
  color: #2850d1;
}
[data-theme="dark"] .composer-pill-btn[data-tool="h1"].active {
  color: #657fd3;
}

/* Blue AI Assistant button inside pill (Figma 270:1560) */
.composer-ai-btn{width:36px;height:36px;min-width:36px;min-height:36px;border-radius:50%;background:#657fd3;color:#ffffff;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;flex-shrink:0;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
.composer-ai-btn:hover{background:#5670c5;transform:scale(1.04)}
.composer-ai-btn:active{transform:scale(0.95)}
.composer-ai-btn.active{background:#2850d1;box-shadow:0 0 14px rgba(40,80,209,0.5)}
.composer-ai-btn svg{display:block;width:36px;height:36px}

.composer-expanded-send-btn{background:#838099;color:rgba(255,255,255,0.8)}
.composer-expanded-send-btn.active{background:#2850d1;color:#f4f3f8}
.composer-expanded-send-btn.active:hover{background:#1e3fa8}

/* AI Ping Mention (@Астрид - Figma 270:2028 / 362:1675) */
.ai-ping-tag {
  display: inline;
  color: #2850D1 !important;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
  vertical-align: baseline;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  white-space: nowrap;
}

.composer-rich-editor .ai-ping-tag,
#message-input .ai-ping-tag,
#discussion-input .ai-ping-tag {
  cursor: pointer;
  user-select: text;
}

[data-theme="dark"] .ai-ping-tag {
  color: #657fd3 !important;
}

/* Editor inline images (Figma 275:1702) */
.editor-image-wrap {
  position: relative;
  display: block;
  width: 100%;
  margin: 10px 0;
  border-radius: 12px;
  overflow: hidden;
  user-select: none;
  line-height: 0;
  box-sizing: border-box;
}

.editor-inline-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: 12px;
  object-fit: cover;
}

.editor-image-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(11, 10, 20, 0.65);
  color: #ffffff;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.15s ease, transform 0.1s ease, background-color 0.15s ease;
  z-index: 10;
  padding: 0;
}

.editor-image-remove:hover {
  background: #e53935;
  opacity: 1;
  transform: scale(1.08);
}

.editor-image-remove:active {
  transform: scale(0.92);
}

.attachment-preview-container {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  max-width: 100%;
  padding: 4px 2px;
  box-sizing: border-box;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.attachment-preview-container::-webkit-scrollbar {
  display: none;
}
.attachment-preview-container.hidden {
  display: none;
}
.attachment-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  background: #ffffff;
  padding: 4px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(11,10,20,0.1);
  transition: transform 0.15s ease;
}
.attachment-chip img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.attachment-chip button,
.attachment-chip .attachment-remove-btn,
.attachment-chip .discussion-attachment-remove-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0b0a14;
  color: #ffffff;
  border: 0;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  transition: transform 0.1s ease, background 0.15s ease;
}
.attachment-chip button:hover,
.attachment-chip .attachment-remove-btn:hover,
.attachment-chip .discussion-attachment-remove-btn:hover {
  background: #e53935;
  transform: scale(1.12);
}
[data-theme="dark"] .attachment-chip {
  background: var(--surface, #1a1926);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
[data-theme="dark"] .attachment-chip button,
[data-theme="dark"] .attachment-chip .attachment-remove-btn,
[data-theme="dark"] .attachment-chip .discussion-attachment-remove-btn {
  background: #302e42;
}
[data-theme="dark"] .attachment-chip button:hover,
[data-theme="dark"] .attachment-chip .attachment-remove-btn:hover,
[data-theme="dark"] .attachment-chip .discussion-attachment-remove-btn:hover {
  background: #e53935;
}
@media(min-width:721px){
  body{
    background-color: var(--background);
    margin: 0;
    padding: 0;
  }
  .app-shell{
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 100vh;
    background-color: var(--background);
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  /* Скрываем старые мобильные/десктопные элементы */
  .sidebar, .topbar, .view-heading{
    display: none!important;
  }

  /* Основная область */
  .main-area{
    display: flex;
    flex-direction: row;
    flex: 1;
    width: 100%;
    max-width: 1497px;
    margin: 0 auto;
    min-height: 100vh;
    background: #f4f3f8;
    padding: 34px 20px;
    margin: 0 auto;
    box-sizing: border-box;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
  }
  .view{
    padding: 0;
    max-width: none;
    margin: 0;
    display: none;
  }
  .view:not(.hidden){
    display: flex;
  }

  /* Режим левой панели на десктопе — отдельная белая колонка (Figma Frame 47 / 229:1256) */
  .side-panel-slot{
    order: 1;
    display: flex;
    flex-direction: column;
    width: 405px;
    min-width: 320px;
    max-width: 405px;
    flex: 0 0 405px;
    height: 944px;
    max-height: calc(100vh - 68px);
    background: #ffffff;
    border: 1px solid rgba(64,64,64,0.1);
    border-radius: 22px;
    margin: 0;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    transition: width 0.2s ease, flex-basis 0.2s ease;
  }
  @media(min-width: 721px) and (max-width: 1440px){
    .side-panel-slot{
      width: 380px;
      flex: 0 0 380px;
      max-width: 380px;
    }
  }
  @media(min-width: 721px) and (max-width: 1280px){
    .side-panel-slot{
      width: 340px;
      flex: 0 0 340px;
      max-width: 340px;
    }
  }

  /* Левая колонка со створкой чата / обсуждения */
  body[data-route="chat"] .side-panel-slot,
  body[data-route="discussion"] .side-panel-slot,
  body[data-route="settings"].has-chat-open .side-panel-slot{
    display: flex !important;
    border-radius: 22px;
    border: 1px solid rgba(64,64,64,0.1);
    margin: 0;
    height: 944px;
    max-height: calc(100vh - 68px);
    align-self: stretch;
  }

  #home-view{
    display: flex !important;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background: #ffffff;
    border: none;
    border-radius: inherit;
    position: absolute;
    inset: 0;
    overflow: hidden;
    justify-content: flex-start;
  }
  /* Шапка внутри колонки (Figma Frame 5) */
  .desktop-home-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 69px;
    min-height: 69px;
    padding: 16px 10px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(64,64,64,0.1);
    background: #ffffff;
    flex-shrink: 0;
  }
  .desktop-brand{
    font-family: 'Fredoka One Cyrillic', 'Fredoka One', 'Fredoka', cursive, sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: 0;
    color: #0b0a14;
  }
  .desktop-home-actions{
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
  }
  .desktop-icon-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    color: #0b0a14;
    cursor: pointer;
  }
  .desktop-icon-btn svg{
    display: block;
    width: 30px;
    height: 30px;
  }
  .desktop-search-bar{
    padding: 10px 10px 0;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
  }
  .desktop-search-bar.hidden{
    display: none!important;
  }
  .desktop-search-bar input{
    width: 100%;
    height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(64,64,64,0.15);
    background: #ffffff;
    font-size: 14px;
    outline: 0;
    font-family: 'Inter', sans-serif;
    color: #0b0a14;
  }

  /* Список карточек чатов и кнопка (Figma Frame 12 и Frame 7) */
  #spaces-grid{
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    padding: 10px 10px 96px 10px;
    margin: 0;
    box-sizing: border-box;
    justify-content: flex-start;
    gap: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  .space-card{
    display: flex;
    align-items: center;
    width: 100%;
    height: 74px;
    min-height: 74px;
    padding: 10px;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 12px;
    box-shadow: none;
    gap: 8px;
    box-sizing: border-box;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease, transform 0.1s ease;
  }
  .space-card:hover{
    background: rgba(40, 80, 209, 0.04);
  }
  .space-card.active{
    background: rgba(40, 80, 209, 0.08);
  }
  .space-card.active:hover{
    background: rgba(40, 80, 209, 0.10);
  }
  .space-card:active{
    background: rgba(40, 80, 209, 0.12);
    transform: scale(0.985);
  }
  .space-card.active:active{
    background: rgba(40, 80, 209, 0.14);
    transform: scale(0.985);
  }
  [data-theme="dark"] .space-card:hover{
    background: rgba(101, 127, 211, 0.05);
  }
  [data-theme="dark"] .space-card.active{
    background: rgba(101, 127, 211, 0.10);
  }
  [data-theme="dark"] .space-card.active:hover{
    background: rgba(101, 127, 211, 0.12);
  }
  [data-theme="dark"] .space-card:active,
  [data-theme="dark"] .space-card.active:active{
    background: rgba(101, 127, 211, 0.14);
    transform: scale(0.985);
  }
  .space-card.space-card-promoting{
    background: rgba(40, 80, 209, 0.08) !important;
    box-shadow: 0 4px 16px rgba(40, 80, 209, 0.15) !important;
  }
  [data-theme="dark"] .space-card.space-card-promoting{
    background: rgba(101, 127, 211, 0.16) !important;
    box-shadow: 0 4px 16px rgba(101, 127, 211, 0.28) !important;
  }
  .space-card .card-top{
    display: block;
    flex-shrink: 0;
  }
  .space-card .space-symbol{
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 9999px;
    overflow: hidden;
    background: linear-gradient(135deg, #657FD3 0%, #455EB5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
  }
  .space-card .card-arrow, .space-card .desktop-space-copy{
    display: none!important;
  }
  .space-card .mobile-space-copy{
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
    height: 54px;
    gap: 4px;
  }
  .space-card .mobile-space-line{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    height: 19px;
  }
  .space-card .mobile-space-line h2{
    overflow: hidden;
    flex: 1;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    color: #0b0a14;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .space-card .mobile-space-line time{
    color: #4a4858;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .space-card .mobile-space-copy p{
    overflow: hidden;
    margin: 0;
    color: #4a4858;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .space-card .mobile-space-copy p.no-posts{
    opacity: 0.5;
  }

  /* Кнопка создания пространства (Frame 7) — ВСЕГДА ВНИЗУ */
  .mobile-create-space{
    width: auto;
    min-width: 216px;
    max-width: 280px;
    height: 44px;
    min-height: 44px;
    background: #2850d1;
    color: #ffffff;
    border-radius: 9999px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    margin: auto auto 0 auto;
    align-self: center;
    border: 0;
    cursor: pointer;
    box-sizing: border-box;
    flex-shrink: 0;
    transition: background-color 0.15s ease, transform 0.1s ease;
  }
  .mobile-create-space span{
    white-space: nowrap;
  }
  .mobile-create-space:hover{
    background: #1e3fa8;
  }
  .mobile-create-space:active{
    transform: scale(0.98);
  }
  .mobile-create-space svg{
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  /* Нижняя панель с кнопкой "Создать пространство" и блюром */
  .home-create-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px 18px;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 25;
  }
  .home-create-bar.hidden {
    display: none !important;
  }
  .home-create-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
      to top,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0.72) 45%,
      rgba(255, 255, 255, 0.22) 75%,
      rgba(255, 255, 255, 0) 100%
    );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    -webkit-mask-image: linear-gradient(
      to top,
      #000 0%,
      #000 48%,
      rgba(0, 0, 0, 0.55) 70%,
      rgba(0, 0, 0, 0.15) 88%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to top,
      #000 0%,
      #000 48%,
      rgba(0, 0, 0, 0.55) 70%,
      rgba(0, 0, 0, 0.15) 88%,
      transparent 100%
    );
  }
  html[data-theme="dark"] .home-create-bar::before {
    background: linear-gradient(
      to top,
      rgba(26, 26, 36, 0.92) 0%,
      rgba(26, 26, 36, 0.70) 45%,
      rgba(26, 26, 36, 0.20) 75%,
      rgba(26, 26, 36, 0) 100%
    );
  }
  .home-create-bar .mobile-create-space {
    pointer-events: auto;
    position: relative;
    z-index: 1;
    margin: 0;
    box-shadow: 0 4px 16px rgba(40, 80, 209, 0.28);
  }
  #spaces-grid.is-empty ~ .home-create-bar,
  #spaces-grid:has(.empty-state) ~ .home-create-bar {
    display: none !important;
  }

  /* Пустое состояние (Empty State) — маскот, надпись и кнопка по центру с отступом 8px (Figma 11:2011 Frame 8) */
  #spaces-grid.is-empty,
  #spaces-grid:has(.empty-state){
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  #spaces-grid.is-empty .empty-state,
  #spaces-grid:has(.empty-state) .empty-state{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    width: 100%;
    padding: 0 0 38px 0;
    margin: 0;
    border: 0;
    background: transparent;
    text-align: center;
  }
  .empty-state-mascot{
    width: 140px;
    height: 166px;
    object-fit: contain;
    object-position: bottom center;
    display: block;
    margin: 0;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none !important;
    cursor: default !important;
    transform-origin: 50% 90%;
    will-change: transform;
  }
  #spaces-grid.is-empty .empty-state h2,
  #spaces-grid:has(.empty-state) .empty-state h2{
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #838099;
    margin: 0;
    text-align: center;
  }
  [data-theme="dark"] #spaces-grid.is-empty .empty-state h2,
  [data-theme="dark"] #spaces-grid:has(.empty-state) .empty-state h2{
    color: #9a9f94;
  }
  #spaces-grid.is-empty .empty-state p,
  #spaces-grid:has(.empty-state) .empty-state p{
    display: none!important;
  }
  #spaces-grid.is-empty .empty-state .mobile-create-space,
  #spaces-grid:has(.empty-state) .empty-state .mobile-create-space{
    margin: 0;
    border-radius: 9999px;
    height: 50px;
    min-height: 50px;
    padding: 10px 16px;
    gap: 6px;
    font-size: 16px;
    width: auto;
    min-width: 233px;
  }
  #spaces-grid.is-empty .empty-state .mobile-create-space *,
  #spaces-grid:has(.empty-state) .empty-state .mobile-create-space *{
    pointer-events: none;
  }
  #spaces-grid.is-empty .empty-state .mobile-create-space svg,
  #spaces-grid:has(.empty-state) .empty-state .mobile-create-space svg{
    width: 24px;
    height: 24px;
  }

  /* Маршруты chat, discussion, settings на десктопе */
  body[data-route="chat"] .sidebar, body[data-route="discussion"] .sidebar, body[data-route="settings"] .sidebar{
    display: none!important;
  }
  body[data-route="chat"] .main-area,
  body[data-route="discussion"] .main-area,
  body[data-route="settings"] .main-area{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
    max-width: 1497px;
    margin: 0 auto;
    padding: 34px 20px;
    background: #f4f3f8;
    height: auto;
    min-height: 100vh;
    box-sizing: border-box;
  }

  /* Порядок колонок: левая боковая панель всегда слева (order 1), правая створка всегда справа (order 2) */
  .side-panel-slot{
    order: 1;
  }
  .chat-panel-slot{
    order: 2;
    display: none;
    flex-direction: column;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 1032px;
    height: 944px;
    max-height: calc(100vh - 68px);
    align-self: stretch;
    background: transparent;
    border: none;
    border-radius: 22px;
    box-shadow: none;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
  }

  html[data-theme="dark"] .side-panel-slot{
    background: #1a1a24;
    border-color: rgba(255, 255, 255, 0.08);
  }
  html[data-theme="dark"] .chat-panel-slot{
    background: transparent;
    border: none;
  }
  html[data-theme="dark"] .chat-panel-slot #chat-view,
  html[data-theme="dark"] .chat-panel-slot #discussion-view,
  html[data-theme="dark"] .chat-panel-slot #space-profile-view{
    background: #12121a;
    border: none;
  }

  body[data-route="chat"] .chat-panel-slot,
  body[data-route="discussion"] .chat-panel-slot,
  body[data-route="space-profile"] .chat-panel-slot,
  body[data-route="settings"].has-chat-open .chat-panel-slot{
    display: flex !important;
  }

  .chat-panel-slot #chat-view,
  .chat-panel-slot #discussion-view{
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    inset: 0;
    background: #f4f3f8;
    border: none;
    border-radius: inherit;
    box-shadow: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
  }

  .chat-panel-slot #chat-view{
    z-index: 1;
    display: flex !important;
    flex-direction: column;
  }

  .chat-panel-slot #discussion-view{
    z-index: 5;
    display: flex !important;
    flex-direction: column;
  }

  .chat-panel-slot #discussion-view.hidden{
    display: none !important;
  }

  /* Фоновый рисунок в чате */
  #chat-view::before,
  #discussion-view::before{
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--space-bg, url('./space_bg.jpg?v=1788891231'));
    background-size: cover;
    background-position: center top;
    opacity: 0.10;
    pointer-events: none;
    z-index: 0;
  }

  /* Подложка с 10% затемнением для пространств (Figma 37:223) */
  .space-bg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.10);
    pointer-events: none;
    z-index: 1;
  }

  /* Нижний градиент убран во избежание белого свечения у инпута */
  #chat-view::after,
  #discussion-view::after{
    display: none !important;
  }

  /* Шапка чата на десктопе (Figma Frame 9) */
  #chat-view .chat-header:not(.space-header-pill) {
    height: 65px;
    min-height: 65px;
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
    border-bottom: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 0;
  }

  /* Парящая шапка и верхний прогрессивный блюр на десктопе (точно как на мобилке) */
  #chat-view .chat-header-bar,
  #discussion-view .chat-header-bar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 30 !important;
    padding-top: 14px !important;
    padding-bottom: 28px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
    border-top-left-radius: 22px !important;
    border-top-right-radius: 22px !important;
  }

  #chat-view .chat-header-bar::before,
  #discussion-view .chat-header-bar::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(
      to bottom,
      rgba(244, 243, 248, 0.72) 0%,
      rgba(244, 243, 248, 0.50) 55%,
      rgba(244, 243, 248, 0.18) 80%,
      rgba(244, 243, 248, 0) 100%
    ) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 50%,
      rgba(0, 0, 0, 0.55) 75%,
      rgba(0, 0, 0, 0.15) 90%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 50%,
      rgba(0, 0, 0, 0.55) 75%,
      rgba(0, 0, 0, 0.15) 90%,
      transparent 100%
    ) !important;
    border-top-left-radius: inherit !important;
    border-top-right-radius: inherit !important;
  }

  [data-theme="dark"] #chat-view .chat-header-bar::before,
  [data-theme="dark"] #discussion-view .chat-header-bar::before {
    background: linear-gradient(
      to bottom,
      rgba(18, 18, 26, 0.55) 0%,
      rgba(18, 18, 26, 0.38) 55%,
      rgba(18, 18, 26, 0.12) 80%,
      rgba(18, 18, 26, 0) 100%
    ) !important;
  }

  #chat-view .chat-header.space-header-pill,
  #discussion-view .chat-header.space-header-pill {
    position: relative !important;
    top: auto !important;
    z-index: 2 !important;
    flex-shrink: 0;
    width: 100% !important;
    max-width: 590px !important;
    margin: 0 auto !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(64, 64, 64, 0.1) !important;
    box-shadow: 0 4px 16px rgba(11, 10, 20, 0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: auto !important;
  }

  #chat-view .chat-header.space-header-pill {
    height: 64px !important;
    min-height: 64px !important;
  }

  #discussion-view .chat-header.space-header-pill {
    height: 55px !important;
    min-height: 55px !important;
  }

  #chat-view .space-back-btn,
  #discussion-view .space-back-btn {
    display: none !important;
  }

  .space-header-pill .space-header-left {
    display: flex;
    align-items: center;
    gap: 6px !important;
    min-width: 0;
    flex: 1;
    padding-left: 0;
  }

  .space-header-pill .space-header-meta {
    display: flex;
    align-items: center;
    gap: 6px !important;
    cursor: pointer;
    user-select: none;
    min-width: 0;
    flex: 1;
    -webkit-tap-highlight-color: transparent;
  }

  .space-header-pill .space-header-meta:hover {
    opacity: 0.92;
  }

  .space-header-pill .space-header-meta:active {
    transform: scale(0.985);
    transition: transform 0.1s ease;
  }

  #chat-view .space-header-pill .space-avatar-wrap {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 50%;
    overflow: hidden;
    background: #ecebf2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .space-header-pill .space-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
  }

  .space-header-pill .space-avatar-img.hidden,
  .space-header-pill .space-avatar-wrap.is-letter .space-avatar-img {
    display: none !important;
  }

  .space-header-pill .space-avatar-wrap.is-letter {
    background: linear-gradient(135deg, #657FD3 0%, #455EB5 100%);
  }

  #chat-view .space-header-pill .space-avatar-letter {
    font-family: 'Inter', sans-serif;
    font-size: 20px !important;
    font-weight: 600;
    color: #ffffff;
    line-height: 1;
    text-transform: uppercase;
  }

  .space-header-pill .space-header-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px !important;
    min-width: 0;
  }

  .space-header-pill .space-title {
    margin: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 19px !important;
    color: #0b0a14 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
    max-width: 220px;
  }

  .space-header-pill .space-subtitle {
    margin: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 16px !important;
    color: #4a4858 !important;
    text-align: left !important;
  }

  .space-header-pill .space-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }

  #chat-view .space-header-pill .header-circle-btn:not(.space-back-btn) {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    background: #f4f3f8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: background 0.15s ease, transform 0.1s ease !important;
    flex-shrink: 0 !important;
  }

  #chat-view .space-header-pill .space-back-btn,
  #chat-view #chat-back-btn,
  #discussion-view .space-back-btn {
    display: none !important;
  }

  #chat-view .space-header-pill .header-circle-btn:hover {
    background: #eae9f2 !important;
  }

  #chat-view .space-header-pill .header-circle-btn:active {
    transform: scale(0.94) !important;
  }

  #chat-view .space-header-pill .header-circle-btn svg {
    width: 20px;
    height: 20px;
    display: block;
  }

  /* Dark mode for space pill header */
  [data-theme="dark"] #chat-view .chat-header.space-header-pill {
    background: #1a1a24 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  }

  [data-theme="dark"] .space-header-pill .space-title {
    color: #f0eff5 !important;
  }

  [data-theme="dark"] .space-header-pill .space-subtitle {
    color: #838099 !important;
  }

  [data-theme="dark"] #chat-view .space-header-pill .header-circle-btn {
    background: #272735 !important;
  }

  [data-theme="dark"] #chat-view .space-header-pill .header-circle-btn:hover {
    background: #323244 !important;
  }

  [data-theme="dark"] .space-header-pill .space-search-btn svg path {
    stroke: #f0eff5 !important;
  }

  [data-theme="dark"] .space-header-pill .space-menu-btn svg circle {
    fill: #838099 !important;
  }

  [data-theme="dark"] .space-header-pill .space-avatar-wrap {
    background: #272735;
  }

  #chat-view .header-circle-btn:not(.space-header-pill .header-circle-btn) {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
  }
  #chat-view .header-circle-btn:not(.space-header-pill .header-circle-btn):hover {
    background: #ffffff;
  }
  #chat-view .header-circle-btn:not(.space-header-pill .header-circle-btn):active {
    transform: scale(0.96);
  }

  #chat-view .chat-header-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  #chat-view .chat-header:not(.space-header-pill) .space-title {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    color: #0b0a14;
    margin: 0;
    text-align: center;
  }

  #chat-view .chat-header:not(.space-header-pill) .space-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: #4a4858;
    text-align: center;
    margin: 0;
  }

  /* Контейнер сообщений на десктопе (Figma Frame 27) с прокруткой под шапку и инпут */
  #chat-view .message-list {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin: 0 !important;
    padding: 106px max(20px, calc((100% - 590px) / 2)) var(--chat-composer-padding, 105px) max(20px, calc((100% - 590px) / 2)) !important;
    gap: 6px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    box-sizing: border-box !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 1 !important;
  }
  #discussion-view .message-list {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin: 0 !important;
    padding: 106px max(20px, calc((100% - 590px) / 2)) var(--disc-composer-padding, 105px) max(20px, calc((100% - 590px) / 2)) !important;
    gap: 6px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    box-sizing: border-box !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 1 !important;
  }
  #chat-view .message-list::-webkit-scrollbar,
  #discussion-view .message-list::-webkit-scrollbar{
    display: none;
  }

  /* Карточки постов на десктопе */
  #chat-view .post-card,
  #discussion-view .post-card{
    width: 590px;
    max-width: 100%;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: none;
    border: 0;
    margin: 0;
    overflow: hidden;
    box-sizing: border-box;
    flex-shrink: 0;
  }

  #chat-view .post-card-image-wrap,
  #discussion-view .post-card-image-wrap{
    width: 100%;
    padding: 10px 10px 0 10px !important;
    box-sizing: border-box;
    display: block;
  }

  #chat-view .post-card-img:not(.tg-album-img),
  #discussion-view .post-card-img:not(.tg-album-img){
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }

  #chat-view .post-card > .post-card-img,
  #discussion-view .post-card > .post-card-img{
    width: calc(100% - 20px);
    margin: 10px 10px 0 10px;
    border-radius: 12px;
  }

  #chat-view .post-card-image-wrap:not(.tg-album-wrap) .post-card-img:not(.tg-album-img),
  #discussion-view .post-card-image-wrap:not(.tg-album-wrap) .post-card-img:not(.tg-album-img){
    width: 100%;
    margin: 0;
    border-radius: 12px;
  }

  #chat-view .post-card-content{
    padding: 12px 12px 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-sizing: border-box;
  }

  #chat-view .post-card-image-wrap + .post-card-content,
  #chat-view .post-card > .post-card-img + .post-card-content{
    padding-top: 6px;
  }

  #chat-view .post-card-title,
  #chat-view .post-heading{
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    color: #0b0a14;
    margin: 0;
    display: flow-root;
  }
  #chat-view .post-heading .post-card-time,
  #chat-view .post-card-title .post-card-time{
    margin-top: 3px;
  }

  #chat-view .post-card-text{
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #4a4858;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    display: flow-root;
  }

  #chat-view .post-card-time{
    float: right;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    color: #4a4858;
    margin-left: 8px;
    margin-top: 6px;
    white-space: nowrap;
    user-select: none;
  }
  #chat-view .post-card-time.is-alone{
    float: none;
    display: block;
    text-align: right;
    margin: 0 0 6px;
  }

  #chat-view .post-card-footer,
  #discussion-view .post-card-footer{
    height: 51px;
    min-height: 51px;
    border-top: 1px solid rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 6px 10px 12px;
    background: #ffffff;
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.15s ease;
    margin-top: 4px;
  }
  #chat-view .post-card-footer:hover{
    background: #f8f8fc;
  }
  #chat-view .post-card-footer span{
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #657fd3;
    line-height: 16px;
  }
  #chat-view .post-card-footer svg{
    display: block;
    width: 24px;
    height: 24px;
  }

  /* Кнопка обсуждения и плавная циклическая анимация непрочитанных комментариев (Figma 47:605, 364:1720, 380:1733) */
  .discuss-ticker {
    position: relative;
    display: flex;
    align-items: center;
    height: 18px;
    min-height: 18px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .discuss-ticker-item {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: #657fd3;
    pointer-events: none;
    will-change: transform, opacity;
  }

  .has-unread-comments .discuss-ticker-unread {
    animation: tickerCycleUnread 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }

  .has-unread-comments .discuss-ticker-default {
    animation: tickerCycleDefault 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }

  @keyframes tickerCycleUnread {
    0%, 44% {
      opacity: 1;
      transform: translateY(0);
    }
    50% {
      opacity: 0;
      transform: translateY(-6px);
    }
    94% {
      opacity: 0;
      transform: translateY(6px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes tickerCycleDefault {
    0%, 46% {
      opacity: 0;
      transform: translateY(6px);
    }
    52%, 90% {
      opacity: 1;
      transform: translateY(0);
    }
    96%, 100% {
      opacity: 0;
      transform: translateY(-6px);
    }
  }

  /* Dark mode overrides for discussion footer & ticker */
  [data-theme="dark"] .post-card-footer,
  [data-theme="dark"] .post-compact-footer,
  [data-theme="dark"] #chat-view .post-card-footer,
  [data-theme="dark"] #chat-view .post-compact-footer {
    background: var(--surface);
    border-top-color: rgba(255, 255, 255, 0.08);
  }

  [data-theme="dark"] .post-card-footer span,
  [data-theme="dark"] .post-compact-footer span,
  [data-theme="dark"] .discuss-ticker-item {
    color: #7b94e8;
  }

  [data-theme="dark"] .discuss-btn-icon path,
  [data-theme="dark"] .post-card-footer svg path,
  [data-theme="dark"] .post-compact-footer svg path {
    stroke: #7b94e8;
  }

  /* Компактный пост на десктопе (Figma Frame 18 / Node 42:213) */
  #chat-view .post-compact{
    align-self: flex-start;
    width: auto;
    min-width: 229px;
    max-width: 590px;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 4px 16px rgba(11, 10, 20, 0.04);
    border: 0;
    margin: 0;
    overflow: hidden;
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 0 0 0;
  }

  #chat-view .post-compact-row{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 0 12px 6px 12px;
    min-height: 25px;
    width: 100%;
    box-sizing: border-box;
  }

  #chat-view .post-compact-text{
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    color: #4a4858;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    flex: 1;
    min-width: 0;
  }

  #chat-view .post-compact-time{
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    color: #4a4858;
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none;
    margin-top: 3px;
  }

  #chat-view .post-compact-footer{
    height: 43px;
    min-height: 43px;
    width: 100%;
    padding: 0 6px 0 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.15s ease;
  }
  #chat-view .post-compact-footer:hover{
    background: #f8f8fc;
  }
  #chat-view .post-compact-footer span{
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: #657fd3;
  }
  #chat-view .post-compact-footer svg{
    display: block;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
  }


  /* Поле ввода сообщения (Figma Frame 21) */
  #chat-view .composer,
  #discussion-view .composer{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 590px;
    max-width: 590px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0;
    background: transparent;
    border: 0;
    transition: none !important;
  }

  #chat-view .composer.expanded{
    height: min(650px, calc(100% - 40px));
    z-index: 50;
  }

  #chat-view .composer-bar,
  #discussion-view .composer-bar{
    height: auto;
    min-height: 58px;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 9999px;
    box-shadow: 0 8px 24px rgba(11, 10, 20, 0.08);
    display: flex;
    align-items: center;
    padding: 10px 10px;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    transition: none !important;
  }

  #chat-view .composer.multiline .composer-bar,
  #chat-view .composer.has-attachment .composer-bar,
  #discussion-view .composer.has-attachment .composer-bar,
  #discussion-view .composer.multiline .composer-bar{
    height: auto;
    min-height: 58px;
    border-radius: 26px;
    align-items: flex-end;
    padding: 10px 10px;
    transition: none !important;
  }

  #chat-view .composer.expanded .composer-bar{
    height: 100%;
    min-height: 400px;
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 20px 16px 16px 16px;
    box-shadow: 0 16px 48px rgba(11, 10, 20, 0.16);
    position: relative;
    overflow: hidden;
  }

  #chat-view .attach-btn,
  #discussion-view .attach-btn{
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
  }
  #chat-view .attach-btn svg,
  #discussion-view .attach-btn svg{
    display: block;
    width: 30px;
    height: 30px;
  }

  #chat-view #message-input{
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    height: auto;
    min-height: 36px;
    max-height: 120px;
    color: #4a4858;
    padding: 8px 4px;
    margin: 0;
    box-sizing: border-box;
    overflow-y: auto;
    word-break: break-word;
    white-space: pre-wrap;
    align-self: center;
    position: relative;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #chat-view #message-input::-webkit-scrollbar{
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  #discussion-view #discussion-input{
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    height: 20px;
    min-height: 20px;
    max-height: 120px;
    color: #4a4858;
    resize: none;
    padding: 0 4px;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    vertical-align: middle;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #discussion-view #discussion-input::-webkit-scrollbar{
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  #chat-view #message-input::placeholder,
  #discussion-view #discussion-input::placeholder{
    color: #838099;
    opacity: 1;
    line-height: 20px;
  }
  #chat-view .composer.multiline #message-input,
  #discussion-view .composer.multiline #discussion-input{
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #chat-view .composer.multiline #message-input::-webkit-scrollbar,
  #discussion-view .composer.multiline #discussion-input::-webkit-scrollbar{
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  #chat-view .composer.expanded:not(.collapsing) #message-input{
    display: none!important;
  }
  #chat-view .composer.collapsing #message-input{
    display: block!important;
  }

  #chat-view .composer-send-btn,
  #discussion-view .composer-send-btn{
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 30px;
    background: #2850d1;
    color: #ffffff;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease, transform 0.1s ease;
  }
  #chat-view .composer-send-btn:hover,
  #discussion-view .composer-send-btn:hover{
    background: #1e3fa8;
  }
  #chat-view .composer-send-btn:active,
  #discussion-view .composer-send-btn:active{
    transform: scale(0.92);
  }

  /* Настройки на десктопе — внутри контейнера .side-panel-slot 405px (Figma Frame 47 / 229:1256) */
  .side-panel-slot #settings-view{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-width: 100%;
    position: absolute;
    inset: 0;
    z-index: 20;
    border: none;
    border-radius: inherit;
    background: #ffffff;
    box-shadow: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    flex-shrink: 0;
    scrollbar-width: thin;
  }
  .side-panel-slot #settings-view .settings-list {
    flex: 1;
    min-height: 0;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
    background: transparent;
  }
  .side-panel-slot #settings-view .settings-auth-row {
    margin-top: auto;
    padding-top: 14px;
    padding-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .side-panel-slot #settings-view.hidden{
    display: none !important;
  }
  .side-panel-slot #settings-view .settings-header{
    background: #ffffff;
    border-bottom: 1px solid rgba(64,64,64,0.08);
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
  }
  .side-panel-slot #settings-view .settings-back-btn{
    background: rgba(255, 255, 255, 0.85);
  }
  .side-panel-slot #settings-view .settings-card,
  .side-panel-slot #settings-view .theme-btn{
    background: #ffffff;
  }
  .side-panel-slot #settings-view .theme-btn.active{
    background: #ffffff;
    border-color: #2850d1;
  }
  html[data-theme="dark"] .side-panel-slot #settings-view,
  html[data-theme="dark"] .side-panel-slot #settings-view .settings-header{
    background: #1a1a24;
  }
  html[data-theme="dark"] .side-panel-slot #settings-view .settings-back-btn,
  html[data-theme="dark"] .side-panel-slot #settings-view .settings-card,
  html[data-theme="dark"] .side-panel-slot #settings-view .theme-btn{
    background: #242432;
  }

  /* Окно создания пространства на десктопе / ноутбуке */
  .modal-backdrop:has(.create-space-screen),
  #modal-backdrop{
    background: rgba(0, 0, 0, 0.70);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .create-space-screen{
    width: 480px;
    min-width: 480px;
    max-width: 480px;
    height: auto;
    max-height: calc(100vh - 40px);
    background: #ffffff;
    color: #0b0a14;
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 36px rgba(11, 10, 20, 0.16);
    box-sizing: border-box;
    overflow: hidden;
  }
}

.mobile-search-bar{padding:0 20px 12px;background:var(--background);display:flex}
.mobile-search-bar.hidden{display:none!important}
.mobile-search-bar input{width:100%;height:38px;padding:0 14px;border-radius:12px;border:1px solid rgba(64,64,64,0.15);background:#ffffff;font-size:14px;outline:0;font-family:'Inter',sans-serif;color:#0b0a14}

@media(max-width:720px){
  .desktop-home-header, .desktop-search-bar { display: none !important; }
  :root{--background:#f4f3f8;--surface:#fff;--surface-secondary:#eeedf3;--text-primary:#0b0a14;--text-secondary:#838099;--border:#dedde4;--accent:#2850d1;--accent-soft:#e4e9ff}
  /* Mobile Bottom Sheet for Create Space Modal */
  .modal-backdrop:has(.create-space-screen),
  #modal-backdrop {
    padding: 0 !important;
    margin: 0 !important;
    align-items: flex-end !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    transition: background-color 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease !important;
    z-index: 1200 !important;
  }

  .modal-backdrop:has(.create-space-screen).sheet-closing,
  #modal-backdrop.sheet-closing {
    background: rgba(0, 0, 0, 0) !important;
    pointer-events: none !important;
  }

  .modal-backdrop:has(.create-space-screen) .create-space-screen,
  #modal-backdrop .create-space-screen {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 90vh !important;
    max-height: 90vh !important;
    min-height: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: 0 -8px 36px rgba(11, 10, 20, 0.22) !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin: 0 !important;
    position: relative !important;
    transform: translateY(0);
    transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform;
    touch-action: pan-y;
  }

  .modal-backdrop:has(.create-space-screen) .create-space-screen.sheet-opening,
  #modal-backdrop .create-space-screen.sheet-opening {
    transform: translateY(100%) !important;
    transition: none !important;
  }

  .modal-backdrop:has(.create-space-screen) .create-space-screen.sheet-closing,
  #modal-backdrop .create-space-screen.sheet-closing {
    transform: translateY(100%) !important;
    transition: transform 0.26s cubic-bezier(0.25, 1, 0.5, 1) !important;
  }

  [data-theme="dark"] .modal-backdrop:has(.create-space-screen) .create-space-screen,
  [data-theme="dark"] #modal-backdrop .create-space-screen {
    background: #191823 !important;
  }

  /* Sheet Drag Handle */
  .modal-backdrop:has(.create-space-screen) .sheet-drag-handle,
  #modal-backdrop .sheet-drag-handle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 12px 0 4px 0 !important;
    cursor: grab !important;
    touch-action: none !important;
    flex-shrink: 0 !important;
  }

  .sheet-drag-pill {
    width: 84px !important;
    height: 4px !important;
    background: #838099 !important;
    border-radius: 12px !important;
    display: block !important;
  }

  [data-theme="dark"] .sheet-drag-pill {
    background: #6f6d85 !important;
  }

  /* Header without close button (per user: "только без крестика") */
  .modal-backdrop:has(.create-space-screen) .create-screen-header,
  #modal-backdrop .create-screen-header {
    height: auto !important;
    min-height: 48px !important;
    padding: 6px 20px 12px 20px !important;
    border-bottom: 1px solid rgba(64, 64, 64, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    flex-shrink: 0 !important;
  }

  [data-theme="dark"] .modal-backdrop:has(.create-space-screen) .create-screen-header,
  [data-theme="dark"] #modal-backdrop .create-screen-header {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  }

  .modal-backdrop:has(.create-space-screen) .screen-header-copy h2,
  #modal-backdrop .screen-header-copy h2 {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    margin: 0 !important;
  }

  /* Hide close button on mobile */
  .modal-backdrop:has(.create-space-screen) .screen-close,
  #modal-backdrop .screen-close {
    display: none !important;
  }

  /* Form & scrollable content */
  .modal-backdrop:has(.create-space-screen) .create-space-form,
  #modal-backdrop .create-space-form {
    flex: 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    gap: 0 !important;
  }

  .modal-backdrop:has(.create-space-screen) .create-form-content,
  #modal-backdrop .create-form-content {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 18px 16px 20px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    scrollbar-width: none !important;
    box-sizing: border-box !important;
  }

  .modal-backdrop:has(.create-space-screen) .create-form-content::-webkit-scrollbar,
  #modal-backdrop .create-form-content::-webkit-scrollbar {
    display: none !important;
  }

  /* Fixed Bottom Footer for Button */
  .modal-backdrop:has(.create-space-screen) .create-space-footer,
  #modal-backdrop .create-space-footer {
    flex-shrink: 0 !important;
    width: 100% !important;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)) 16px !important;
    background: #ffffff !important;
    border-top: 1px solid rgba(64, 64, 64, 0.08) !important;
    box-shadow: 0 -4px 16px rgba(11, 10, 20, 0.04) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
  }

  [data-theme="dark"] .modal-backdrop:has(.create-space-screen) .create-space-footer,
  [data-theme="dark"] #modal-backdrop .create-space-footer {
    background: #191823 !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25) !important;
  }

  .modal-backdrop:has(.create-space-screen) .create-chat-button,
  #modal-backdrop .create-chat-button {
    width: 100% !important;
    max-width: 340px !important;
    height: 50px !important;
    min-height: 50px !important;
    border-radius: 29px !important;
    margin: 0 auto !important;
  }

  /* Space Avatar & Name Input styling per Figma */
  .modal-backdrop:has(.create-space-screen) .space-avatar-circle,
  #modal-backdrop .space-avatar-circle {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
    min-height: 96px !important;
    background: #f4f3f8 !important;
    border-radius: 50% !important;
    border: none !important;
  }

  [data-theme="dark"] .modal-backdrop:has(.create-space-screen) .space-avatar-circle,
  [data-theme="dark"] #modal-backdrop .space-avatar-circle {
    background: #232230 !important;
  }

  .modal-backdrop:has(.create-space-screen) #space-name,
  #modal-backdrop #space-name {
    width: 100% !important;
    max-width: 340px !important;
    height: 48px !important;
    min-height: 48px !important;
    background: #f4f3f8 !important;
    border-radius: 9999px !important;
    border: none !important;
    text-align: center !important;
    font-size: 16px !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }

  [data-theme="dark"] .modal-backdrop:has(.create-space-screen) #space-name,
  [data-theme="dark"] #modal-backdrop #space-name {
    background: #232230 !important;
  }
  .modal-backdrop:has(.create-space-screen) .personality-options{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 10px !important;
    max-height: none !important;
    padding: 6px 8px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .modal-backdrop:has(.create-space-screen) .personality-options::-webkit-scrollbar{
    display: none !important;
  }
  .modal-backdrop:has(.create-space-screen) .personality-card{
    width: 82px !important;
    min-width: 82px !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
  }
  .modal-backdrop:has(.create-space-screen) .personality-card-avatar{
    width: 72px !important;
    height: 72px !important;
  }
  .app-shell{display:block;min-height:100svh;background:var(--background)}
  .sidebar{display:flex;flex-direction:column;position:sticky;top:0;z-index:5;width:100%;min-height:calc(79px + env(safe-area-inset-top, 0px));padding:0;background:var(--background);border-bottom:1px solid rgba(64,64,64,.1)}
  .sidebar-top{display:flex;align-items:center;width:100%;height:calc(79px + env(safe-area-inset-top, 0px));min-height:calc(79px + env(safe-area-inset-top, 0px));margin:0;padding:calc(16px + env(safe-area-inset-top, 0px)) 20px 16px;background:var(--background);border:0;box-sizing:border-box;position:relative;overflow:hidden}
  .brand{font-family:'Fredoka One Cyrillic','Fredoka One','Fredoka',cursive,sans-serif;font-size:26px;font-weight:700;line-height:31px;letter-spacing:0;color:#0b0a14}
  .brand-name-desktop{display:none}.brand-name-mobile{display:inline;font-family:inherit;font-weight:inherit}
  .mobile-home-actions{display:flex;align-items:center;gap:16px;margin-left:auto}
  .mobile-settings-button,.mobile-home-icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;background:none;border:0;border-radius:50%;color:#0b0a14;cursor:pointer}
  .mobile-settings-button svg,.mobile-home-icon svg{display:block;width:30px;height:30px}
  .brand-mark{display:none}
  .mobile-settings-button{margin-left:0}
  .sidebar-label,.space-nav,.sidebar-create,.sidebar-bottom{display:none}
  .main-area{background:var(--background)}
  .topbar{display:none!important}
  body[data-route="home"] .app-shell {
    display: flex !important;
    flex-direction: column !important;
    height: var(--app-height, 100%) !important;
    min-height: 0 !important;
    max-height: var(--app-height, 100%) !important;
    overflow: hidden !important;
  }
  body[data-route="home"] .sidebar {
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
    position: relative !important;
    top: auto !important;
    z-index: 5 !important;
  }
  body[data-route="home"] .main-area {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body[data-route="home"] .side-panel-slot {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    background: transparent !important;
    border: none !important;
  }
  #home-view,
  body[data-route="home"] #home-view {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--background, #f4f3f8) !important;
  }
  body[data-route="home"] .view-heading { display: none; }
  .spaces-grid,
  body[data-route="home"] .spaces-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    padding: 10px 20px calc(110px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .spaces-grid::-webkit-scrollbar,
  body[data-route="home"] .spaces-grid::-webkit-scrollbar {
    display: none !important;
  }
  body[data-route="home"] .spaces-grid.is-empty,
  body[data-route="home"] .spaces-grid:has(.empty-state) {
    overflow-y: hidden !important;
    padding: 0 20px !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;flex:1;width:100%;min-height:0;padding:0 0 38px 0;margin:0;border:0;border-radius:0;text-align:center}
  .empty-state-mascot{width:140px;height:166px;object-fit:contain;object-position:bottom center;display:block;margin:0;user-select:none!important;-webkit-user-drag:none!important;pointer-events:none!important;cursor:default!important;transform-origin:50% 90%;will-change:transform}
  .empty-state h2{font-family:'Inter',sans-serif;color:#838099;font-size:16px;font-weight:400;line-height:19px;margin:0}
  [data-theme="dark"] .empty-state h2{color:#9a9f94}
  .empty-state p{display:none}
  .space-card{display:flex;align-items:center;width:100%;height:74px;margin-top:0;padding:10px 0;background:transparent;border:0;border-radius:0;box-shadow:none;gap:8px;box-sizing:border-box;cursor:pointer}
  .space-card .card-top{display:block;flex-shrink:0}
  .space-card .space-symbol{width:54px;height:54px;margin-top:0;background:linear-gradient(135deg, #657FD3 0%, #455EB5 100%);border-radius:999px;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#ffffff;font-family:'Inter',sans-serif;font-size:24px;font-weight:600;line-height:1;text-transform:uppercase;flex-shrink:0}
  .space-card .card-arrow,.space-card .desktop-space-copy{display:none}
  .mobile-space-copy{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0;height:54px;gap:4px}
  .mobile-space-line{display:flex;align-items:center;justify-content:space-between;gap:4px;height:19px}
  .mobile-space-line h2{overflow:hidden;flex:1;margin:0;font-family:'Inter',sans-serif;font-size:16px;font-weight:500;line-height:19px;color:#0b0a14;white-space:nowrap;text-overflow:ellipsis}
  .mobile-space-line time{color:#4a4858;font-family:'Inter',sans-serif;font-size:14px;font-weight:500;line-height:16px;white-space:nowrap;flex-shrink:0}
  .mobile-space-copy p{overflow:hidden;margin:0;color:#4a4858;font-family:'Inter',sans-serif;font-size:14px;font-weight:400;line-height:16px;white-space:nowrap;text-overflow:ellipsis}
  .mobile-space-copy p.no-posts{opacity:0.5}
  .mobile-create-space{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;min-width:216px;max-width:calc(100% - 40px);height:44px;min-height:44px;margin:auto auto 0 auto;align-self:center;padding:10px 22px;background:#2850d1;color:#ffffff;border-radius:9999px;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;font-size:15px;font-weight:500;line-height:18px;white-space:nowrap;cursor:pointer;box-sizing:border-box;border:0;flex-shrink:0;position:sticky;bottom:20px;z-index:10}
  .mobile-create-space span{white-space:nowrap}
  .empty-state .mobile-create-space{margin:0!important;position:static!important;align-self:center!important;height:50px!important;min-height:50px!important;padding:10px 16px!important;gap:6px!important;font-size:16px!important;min-width:233px!important}
  .empty-state .mobile-create-space *{pointer-events:none}
  .empty-state .mobile-create-space svg{width:24px!important;height:24px!important}
  .mobile-create-space:hover{background:#1e3fa8}
  .mobile-create-space:active{transform:scale(0.98)}
  .mobile-create-space svg{display:block;width:20px;height:20px;flex-shrink:0}
  .home-create-bar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 20px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    z-index: 25 !important;
  }
  .home-create-bar.hidden {
    display: none !important;
  }
  .home-create-bar::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background: linear-gradient(
      to top,
      rgba(244, 243, 248, 0.90) 0%,
      rgba(244, 243, 248, 0.68) 45%,
      rgba(244, 243, 248, 0.22) 75%,
      rgba(244, 243, 248, 0) 100%
    ) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    -webkit-mask-image: linear-gradient(
      to top,
      #000 0%,
      #000 48%,
      rgba(0, 0, 0, 0.55) 70%,
      rgba(0, 0, 0, 0.15) 88%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to top,
      #000 0%,
      #000 48%,
      rgba(0, 0, 0, 0.55) 70%,
      rgba(0, 0, 0, 0.15) 88%,
      transparent 100%
    ) !important;
  }
  [data-theme="dark"] .home-create-bar::before {
    background: linear-gradient(
      to top,
      rgba(18, 18, 26, 0.85) 0%,
      rgba(18, 18, 26, 0.60) 45%,
      rgba(18, 18, 26, 0.20) 75%,
      rgba(18, 18, 26, 0) 100%
    ) !important;
  }
  .home-create-bar .mobile-create-space {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1 !important;
    margin: 0 !important;
    bottom: auto !important;
    box-shadow: 0 4px 16px rgba(40, 80, 209, 0.28) !important;
  }
  #spaces-grid.is-empty ~ .home-create-bar,
  #spaces-grid:has(.empty-state) ~ .home-create-bar {
    display: none !important;
  }
  body[data-route="chat"] .app-shell,
  body[data-route="discussion"] .app-shell {
    height: var(--app-height, 100%);
    min-height: 0;
    max-height: var(--app-height, 100%);
    overflow: hidden;
  }
  body[data-route="chat"] .main-area,
  body[data-route="discussion"] .main-area {
    width: 100%;
    height: var(--app-height, 100%);
    min-height: 0;
    max-height: var(--app-height, 100%);
    padding: 0;
    background: #f4f3f8;
    overflow: hidden;
  }
  body[data-route="chat"],
  body[data-route="discussion"],
  body[data-route="space-profile"] {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  .chat-panel-slot {
    display: none;
    width: 100%;
    height: var(--app-height, 100%);
    max-height: var(--app-height, 100%);
    min-height: 0;
    max-width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    flex: 1;
  }

  body[data-route="chat"] .chat-panel-slot,
  body[data-route="discussion"] .chat-panel-slot,
  body[data-route="space-profile"] .chat-panel-slot {
    display: flex !important;
    flex-direction: column;
  }

  .chat-panel-slot #chat-view,
  .chat-panel-slot #discussion-view,
  .chat-panel-slot #space-profile-view {
    width: 100%;
    height: var(--app-height, 100%);
    max-height: var(--app-height, 100%);
    min-height: 0;
    max-width: 100%;
    padding: 0;
    overflow: hidden;
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    flex: 1;
  }

  .chat-panel-slot #chat-view {
    z-index: 1;
    display: flex !important;
    flex-direction: column;
  }

  .chat-panel-slot #discussion-view {
    z-index: 5;
    display: flex !important;
    flex-direction: column;
  }

  .chat-panel-slot #discussion-view.hidden {
    display: none !important;
  }

  .chat-panel-slot #space-profile-view {
    z-index: 25;
    display: flex !important;
    flex-direction: column;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .chat-panel-slot #space-profile-view.hidden {
    display: none !important;
  }
  #chat-view .chat-header,
  #discussion-view .chat-header{
    background: rgba(244, 243, 248, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(64, 64, 64, 0.06);
    position: sticky;
    top: 0;
    z-index: 30;
  }
  body[data-route="settings"] #chat-view{display:none!important}
  .side-panel-slot{
    width: 100%;
    min-height: calc(100svh - 64px);
    position: relative;
    border: none;
    border-radius: 0;
    background: transparent;
  }
  body[data-route="chat"] .side-panel-slot,
  body[data-route="discussion"] .side-panel-slot,
  body[data-route="space-profile"] .side-panel-slot{
    display: none !important;
  }

  #settings-view{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100svh;
    max-width: 100%;
    z-index: 100;
    background: #ffffff;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }
  #settings-view.hidden{
    display: none !important;
  }
  body.swiping-chat-to-home .side-panel-slot {
    display: block !important;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    overflow-y: hidden;
    pointer-events: none;
    background: var(--background, #f4f3f8);
  }
  body.swiping-chat-to-home #home-view {
    display: block !important;
    background: var(--background, #f4f3f8);
    padding: 0 !important;
  }
  body.swiping-chat-to-home .sidebar {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    min-height: 64px;
    padding: 0;
    background: var(--background, #f4f3f8);
    border-bottom: 1px solid rgba(64,64,64,.1);
    z-index: 2;
    pointer-events: none;
  }
  body.swiping-chat-to-home .chat-panel-slot {
    display: flex !important;
    position: fixed;
    inset: 0;
    z-index: 10;
    box-shadow: -8px 0 28px rgba(11, 10, 20, 0.15);
    background: #f4f3f8;
  }

  body.swiping-settings-to-home .side-panel-slot {
    display: block !important;
    position: static !important;
    z-index: auto !important;
    background: transparent !important;
    border: none !important;
  }
  body.swiping-settings-to-home #home-view {
    display: block !important;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--background, #f4f3f8);
    padding: 0 !important;
    overflow-y: hidden;
    pointer-events: none;
    z-index: 1;
  }
  body.swiping-settings-to-home .sidebar,
  body.opening-settings .sidebar {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    min-height: 64px;
    padding: 0;
    background: var(--background, #f4f3f8);
    border-bottom: 1px solid rgba(64,64,64,.1);
    z-index: 2;
    pointer-events: none;
  }
  body.swiping-settings-to-home #settings-view {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 100 !important;
    background: #ffffff;
    box-shadow: -8px 0 28px rgba(11, 10, 20, 0.16);
  }
  html[data-theme="dark"] body.swiping-settings-to-home #settings-view {
    background: #12111a;
  }
}

/* Анимация перехода на страницу настроек (справа налево, не выходя из контейнера) */
@keyframes settingsSlideIn{
  0%{
    transform: translate3d(100%, 0, 0);
  }
  100%{
    transform: translate3d(0, 0, 0);
  }
}

@keyframes settingsSlideOut{
  0%{
    transform: translate3d(0, 0, 0);
  }
  100%{
    transform: translate3d(100%, 0, 0);
  }
}

#settings-view.slide-in{
  display: flex !important;
  animation: settingsSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  box-shadow: -8px 0 24px rgba(11, 10, 20, 0.08);
}

#settings-view.slide-out{
  display: flex !important;
  animation: settingsSlideOut 0.25s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  box-shadow: -8px 0 24px rgba(11, 10, 20, 0.08);
}

/* Анимация перехода на страницу обсуждения (справа налево, заменяя экран пространства) */
@keyframes discussionSlideIn{
  0%{
    transform: translate3d(100%, 0, 0);
  }
  100%{
    transform: translate3d(0, 0, 0);
  }
}

@keyframes discussionSlideOut{
  0%{
    transform: translate3d(0, 0, 0);
  }
  100%{
    transform: translate3d(100%, 0, 0);
  }
}

#discussion-view.slide-in{
  display: flex !important;
  animation: discussionSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  box-shadow: -8px 0 28px rgba(11, 10, 20, 0.1);
  z-index: 25 !important;
}

#discussion-view.slide-out{
  display: flex !important;
  animation: discussionSlideOut 0.25s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  box-shadow: -8px 0 28px rgba(11, 10, 20, 0.1);
  z-index: 25 !important;
}

/* Figma 177:2895 — Поисковая строка в шапке (плавная анимация справа налево) */
.header-search-wrap{
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 320px;
  max-width: calc(100% - 40px);
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 10;
}

#desktop-header-search-wrap {
  position: absolute;
  top: 50%;
  left: 10px;
  right: 10px;
  transform: translateY(-50%);
  width: calc(100% - 20px);
  max-width: none;
  height: 46px;
}

@media (max-width: 720px) {
  #mobile-header-search-wrap {
    position: absolute;
    top: calc(16px + env(safe-area-inset-top, 0px));
    left: 20px;
    right: 20px;
    transform: none;
    width: calc(100% - 40px);
    max-width: none;
    height: 46px;
  }
}

.header-search-pill{
  width: 100%;
  height: 46px;
  background: #ffffff;
  border-radius: 9999px;
  border: 1px solid rgba(64, 64, 64, 0.1);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  box-sizing: border-box;
  box-shadow: 0 2px 12px rgba(11, 10, 20, 0.06);
  clip-path: inset(0 0 0 100% round 9999px);
  opacity: 0;
  pointer-events: none;
  transition: clip-path 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.22s ease,
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translate3d(12px, 0, 0);
}

.header-search-wrap.active {
  pointer-events: auto;
}

.header-search-wrap.active .header-search-pill{
  clip-path: inset(0 0 0 0 round 9999px);
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

.search-pill-icon{
  width: 24px;
  height: 24px;
  min-width: 24px;
  stroke: #4a4858;
  flex-shrink: 0;
  display: block;
}

.header-search-input{
  font-family: 'Roboto', 'Inter', sans-serif !important;
  font-size: 16px !important;
  line-height: 19px !important;
  color: #0b0a14 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  flex: 1;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
  height: 100%;
}

.header-search-input:focus,
.header-search-input:focus-visible{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.header-search-input::placeholder{
  color: #838099;
  opacity: 1;
}

.header-search-close{
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  color: #838099;
  flex-shrink: 0;
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}

.header-search-close:hover{
  color: #0b0a14;
  background-color: rgba(0, 0, 0, 0.06);
}

.header-search-close:active{
  transform: scale(0.92);
}

.header-search-close.hidden{
  display: none !important;
}

.header-search-wrap.active .header-search-close {
  display: flex !important;
}

/* Space Header Inline Search (Chat & Discussion Views) */
.space-header-search-wrap {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: stretch !important;
  pointer-events: none;
  z-index: 10;
  border-radius: 9999px;
  overflow: hidden;
  box-sizing: border-box;
}

.space-header-search-wrap .header-search-pill {
  width: 100% !important;
  height: 100% !important;
  border-radius: 9999px !important;
  background: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  clip-path: inset(0 0 0 100% round 9999px);
  opacity: 0;
  pointer-events: none;
  transition: clip-path 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.22s ease,
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translate3d(12px, 0, 0);
}

.space-header-search-wrap.active {
  pointer-events: auto;
}

.space-header-search-wrap.active .header-search-pill {
  clip-path: inset(0 0 0 0 round 9999px);
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

.space-header-search-wrap.active .header-search-close {
  display: flex !important;
}

.chat-header.space-header-pill.search-active .space-header-left,
.chat-header.space-header-pill.search-active .space-header-right {
  opacity: 0 !important;
  pointer-events: none !important;
}

.chat-header.space-header-pill .space-header-left,
.chat-header.space-header-pill .space-header-right {
  transition: opacity 0.2s ease;
}

.desktop-home-header{
  position: relative;
  overflow: hidden;
}

.desktop-home-header.search-active .desktop-brand,
.desktop-home-header.search-active .desktop-home-actions,
.sidebar-top.search-active .mobile-home-actions,
.sidebar-top.search-active .brand {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.18s ease;
}

.desktop-brand,
.sidebar-top .brand,
.desktop-home-actions,
.mobile-home-actions{
  transition: opacity 0.2s ease;
}

/* Dark mode theme support */
[data-theme="dark"] .header-search-pill,
[data-theme="dark"] .space-header-search-wrap .header-search-pill {
  background: #1a1a24 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .search-pill-icon path {
  stroke: #838099 !important;
}

[data-theme="dark"] .header-search-input {
  color: #f0eff5 !important;
}

[data-theme="dark"] .header-search-input::placeholder {
  color: #838099 !important;
}

[data-theme="dark"] .header-search-close {
  color: #838099 !important;
}

[data-theme="dark"] .header-search-close:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.settings-view,
#settings-view {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  background: #ffffff !important;
  display: flex;
  flex-direction: column;
  padding: 0;
  min-height: 100svh;
  box-sizing: border-box;
}

.settings-header {
  height: calc(65px + env(safe-area-inset-top, 0px));
  min-height: calc(65px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 20px 10px;
  border-bottom: 1px solid rgba(64, 64, 64, 0.08);
  background: #ffffff;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 10;
}

.settings-back-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, transform 0.1s ease;
}

.settings-back-btn:hover {
  background: #ffffff;
}

.settings-back-btn:active {
  transform: scale(0.96);
}

.settings-header .settings-title,
#settings-view .settings-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #0b0a14 !important;
  margin: 0 !important;
  line-height: 19px !important;
}

/* Profile Photo Card - Figma Frame 40 (node 563:1949) */
.settings-profile-banner {
  width: calc(100% - 20px);
  max-width: 360px;
  height: 360px;
  min-height: 280px;
  max-height: 48vh;
  margin: 10px auto 0 auto;
  border-radius: 12px;
  position: relative;
  background-image: url('./profile_banner.png');
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
  border: 1px solid rgba(131, 128, 153, 0.2);
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
}

#settings-banner-input {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Scalable Dark Overlay over Photo - Figma Rectangle 89 (node 564:2002) */
.settings-profile-gradient {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(28, 28, 28, 0.77) 100%);
  pointer-events: none;
  z-index: 1;
}

.settings-profile-name-wrap {
  position: absolute;
  bottom: 20px;
  left: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: default;
  pointer-events: none;
  box-sizing: border-box;
}

.settings-profile-name {
  font-family: 'Fredoka One Cyrillic', 'Fredoka One', 'Fredoka', 'Inter', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  width: 100%;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.settings-profile-firstname,
.settings-profile-lastname {
  display: block;
  width: 100%;
  text-align: center;
  line-height: 1;
}

.settings-profile-lastname:empty {
  display: none;
}

.settings-profile-edit-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  border: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: background 0.15s ease, transform 0.1s ease;
}

.settings-profile-edit-btn:hover {
  background: #ffffff;
  transform: scale(1.06);
}

.settings-profile-edit-btn:active {
  transform: scale(0.95);
}

.settings-profile-edit-btn svg path {
  stroke: #4a4858;
}

/* Settings Cards List - Figma Frame 41 (node 563:1951) */
.settings-list {
  padding: 10px;
  max-width: 360px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  background: transparent;
  box-sizing: border-box;
}

.settings-card {
  background: #ffffff;
  border-radius: 12px;
  border: 0;
  box-sizing: border-box;
  width: 100%;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: background 0.15s ease, transform 0.1s ease;
}

.settings-card:hover {
  background: #fafafc;
}

.settings-card:active {
  transform: scale(0.99);
}

.username-card {
  height: 58px;
  min-height: 58px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.settings-card-val {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #2850d1;
  line-height: 17px;
}

.settings-card-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #838099;
  line-height: 17px;
}

.feedback-card {
  height: 50px;
  min-height: 50px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}

.settings-card-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: #4a4858;
}

.settings-card-icon svg {
  display: block;
}

.settings-card-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #4a4858;
  line-height: 17px;
}

.settings-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: #4a4858;
}

.settings-chevron svg {
  display: block;
}

.settings-theme-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.theme-btn {
  flex: 1;
  height: 58px;
  min-height: 58px;
  background: #ffffff;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid transparent;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.theme-btn:hover {
  background: #fafafc;
}

.theme-btn:active {
  transform: scale(0.98);
}

.theme-btn.active {
  background: #ffffff;
  border-color: #2850d1;
}

.theme-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: #4a4858;
}

.theme-btn-icon svg {
  display: block;
}

.theme-btn-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #4a4858;
  line-height: 17px;
}

/* Delete account row - Figma Frame 43 (node 563:1958) */
.settings-auth-row {
  margin-top: 10px;
  padding-top: 10px;
  padding-bottom: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.settings-logout-btn {
  background: none;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #e05757;
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.settings-logout-btn:hover {
  background: rgba(224, 87, 87, 0.08);
}

.settings-logout-btn:active {
  background: rgba(224, 87, 87, 0.16);
}

/* Dark theme for settings view */
html[data-theme="dark"] .settings-view,
html[data-theme="dark"] #settings-view {
  background: #12111a !important;
}

html[data-theme="dark"] .settings-header,
html[data-theme="dark"] .side-panel-slot #settings-view .settings-header {
  background: #12111a !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .settings-header .settings-title,
html[data-theme="dark"] #settings-view .settings-title {
  color: #eef0e9 !important;
}

html[data-theme="dark"] .settings-back-btn {
  background: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] .settings-back-btn svg path {
  stroke: #eef0e9 !important;
}

html[data-theme="dark"] .settings-profile-banner {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .settings-profile-edit-btn {
  background: rgba(32, 30, 44, 0.85);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .settings-profile-edit-btn:hover {
  background: rgba(48, 45, 66, 0.95);
}

html[data-theme="dark"] .settings-profile-edit-btn svg path {
  stroke: #ffffff !important;
}

html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .theme-btn {
  background: #1c1b26 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .settings-card:hover,
html[data-theme="dark"] .theme-btn:hover {
  background: #242232 !important;
}

html[data-theme="dark"] .settings-card-val {
  color: #657fd3 !important;
}

html[data-theme="dark"] .settings-card-lbl {
  color: #838099 !important;
}

html[data-theme="dark"] .settings-card-text,
html[data-theme="dark"] .theme-btn-text {
  color: #eef0e9 !important;
}

html[data-theme="dark"] .settings-card-icon svg path,
html[data-theme="dark"] .settings-chevron svg path,
html[data-theme="dark"] .theme-btn-icon svg path {
  stroke: #c5c4d4 !important;
}

html[data-theme="dark"] .theme-btn.active {
  border-color: #657fd3 !important;
}

html[data-theme="dark"] .theme-btn.active .theme-btn-text {
  color: #657fd3 !important;
}

html[data-theme="dark"] .theme-btn.active .theme-btn-icon svg path {
  stroke: #657fd3 !important;
}

/* Окно настройки профиля (Figma Frame 60 / node 229:1382) */
.profile-menu-backdrop {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.40);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  touch-action: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
}

.profile-menu-backdrop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.profile-menu-backdrop.hidden {
  display: none !important;
}

.profile-menu-sheet {
  width: 100%;
  max-width: 405px;
  background: #ffffff;
  border-radius: 22px 22px 0 0;
  padding: 20px 20px max(24px, env(safe-area-inset-bottom, 24px)) 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.profile-menu-backdrop.active .profile-menu-sheet {
  transform: translateY(0);
}

.profile-menu-handle {
  width: 108px;
  height: 4px;
  background: #1d1b20;
  border-radius: 12px;
  margin: 0 auto;
  flex-shrink: 0;
  cursor: grab;
  touch-action: none;
  position: relative;
  transition: opacity 0.15s ease;
}

.profile-menu-handle::after {
  content: '';
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: -20px;
  right: -20px;
}

.profile-menu-handle:hover {
  opacity: 0.7;
}

.profile-menu-handle:active {
  cursor: grabbing;
}

.profile-menu-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.profile-menu-title {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  color: #0b0a14;
  margin: 0;
  padding: 0;
  text-align: left;
}

.profile-menu-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.profile-menu-item {
  width: 100%;
  height: 58px;
  min-height: 58px;
  background: #f4f3f8;
  border-radius: 12px;
  border: 0;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  box-sizing: border-box;
  text-align: left;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.profile-menu-item:hover {
  background: #eeedf3;
}

.profile-menu-item:active {
  transform: scale(0.99);
}

.profile-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: #4a4858;
}

.profile-menu-icon svg {
  display: block;
}

.profile-menu-label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  color: #4a4858;
}

/* Dark theme */
[data-theme="dark"] .profile-menu-sheet {
  background: #1a1a24;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .profile-menu-handle {
  background: rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .profile-menu-title {
  color: #eef0e9;
}

[data-theme="dark"] .profile-menu-item {
  background: #242432;
}

[data-theme="dark"] .profile-menu-item:hover {
  background: #2c2c3d;
}

[data-theme="dark"] .profile-menu-icon {
  color: #c5c4d4;
}

[data-theme="dark"] .profile-menu-icon svg path {
  stroke: #c5c4d4;
}

[data-theme="dark"] .profile-menu-label {
  color: #eef0e9;
}

@media (min-width: 721px) {
  .side-panel-slot .profile-menu-backdrop {
    position: absolute;
    inset: 0;
    z-index: 50;
    border-radius: inherit;
    overflow: hidden;
  }
}

/* Mobile optimizations for chat composer */
@media (max-width: 720px) {
  .profile-menu-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100 !important;
  }
  .profile-menu-sheet {
    max-width: 100% !important;
    border-radius: 22px 22px 0 0 !important;
  }

  /* Remove 120px blur gradient overlay on mobile */
  #chat-view::after,
  #discussion-view::after {
    display: none !important;
  }

  body[data-route="chat"]:not(.swiping-chat-to-home) .sidebar,
  body[data-route="discussion"]:not(.swiping-chat-to-home) .sidebar,
  body[data-route="space-profile"]:not(.swiping-chat-to-home) .sidebar,
  body[data-route="settings"]:not(.swiping-settings-to-home):not(.opening-settings) .sidebar {
    display: none !important;
  }

  body[data-route="chat"] .app-shell,
  body[data-route="discussion"] .app-shell,
  body[data-route="space-profile"] .app-shell,
  body[data-route="chat"] .main-area,
  body[data-route="discussion"] .main-area,
  body[data-route="space-profile"] .main-area,
  #chat-view,
  #discussion-view,
  #space-profile-view {
    height: var(--app-height, 100%);
    max-height: var(--app-height, 100%);
    min-height: 0;
  }
  
  #chat-view, #discussion-view {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Lock space background to full screen height so keyboard or discussion never shifts or zooms it */
  #chat-view::before,
  #discussion-view::before,
  .space-bg-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100vw !important;
    height: var(--app-full-height, 100dvh) !important;
    min-height: 100vh !important;
    pointer-events: none !important;
    transform: none !important;
  }
  #chat-view::before,
  #discussion-view::before {
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    z-index: 0 !important;
  }
  .space-bg-overlay {
    background: rgba(0, 0, 0, 0.10) !important;
    z-index: 1 !important;
  }

  @keyframes discussionFadeInMobile {
    0% {
      opacity: 0;
      transform: translate3d(0, 12px, 0);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes discussionFadeOutMobile {
    0% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
    100% {
      opacity: 0;
      transform: translate3d(0, 12px, 0);
    }
  }

  #discussion-view.slide-in {
    display: flex !important;
    animation: discussionFadeInMobile 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    box-shadow: none !important;
  }

  #discussion-view.slide-out {
    display: flex !important;
    animation: discussionFadeOutMobile 0.18s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
    box-shadow: none !important;
  }

  .chat-header-bar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 30 !important;
    padding-top: max(10px, env(safe-area-inset-top, 10px)) !important;
    padding-bottom: 28px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
  }

  .chat-header-bar .chat-header.space-header-pill {
    pointer-events: auto !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 590px !important;
    height: 55px !important;
    min-height: 55px !important;
    padding: 8px 10px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .chat-header-bar .space-header-pill .space-avatar-wrap {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  .chat-header-bar .space-header-pill .space-avatar-letter {
    font-size: 16px !important;
  }

  .chat-header-bar .chat-header.discussion-header-pill {
    height: 55px !important;
    min-height: 55px !important;
  }

  #discussion-view .chat-header::before {
    display: none !important;
  }

  #discussion-view .chat-header > *,
  #discussion-view #discussion-back,
  #discussion-view .header-circle-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }

  [data-theme="dark"] #discussion-view .header-circle-btn {
    background: #272735 !important;
  }
  [data-theme="dark"] #discussion-view .header-circle-btn svg path {
    stroke: #f0eff5 !important;
  }

  .chat-header-bar::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(
      to bottom,
      rgba(244, 243, 248, 0.72) 0%,
      rgba(244, 243, 248, 0.50) 55%,
      rgba(244, 243, 248, 0.18) 80%,
      rgba(244, 243, 248, 0) 100%
    ) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 50%,
      rgba(0, 0, 0, 0.55) 75%,
      rgba(0, 0, 0, 0.15) 90%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 50%,
      rgba(0, 0, 0, 0.55) 75%,
      rgba(0, 0, 0, 0.15) 90%,
      transparent 100%
    ) !important;
  }

  [data-theme="dark"] .chat-header-bar::before {
    background: linear-gradient(
      to bottom,
      rgba(18, 18, 26, 0.55) 0%,
      rgba(18, 18, 26, 0.38) 55%,
      rgba(18, 18, 26, 0.12) 80%,
      rgba(18, 18, 26, 0) 100%
    ) !important;
  }

  /* Стрелка назад в шапке на мобилке (Figma 389:1765 Frame 16) */
  .space-back-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    background: #f4f3f8 !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: background-color 0.15s ease, transform 0.1s ease !important;
  }
  .space-back-btn:active {
    transform: scale(0.92) !important;
  }
  .space-back-btn svg {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
  }
  .space-back-btn svg path {
    stroke: #4a4858 !important;
  }
  [data-theme="dark"] .space-back-btn {
    background: #272735 !important;
  }
  [data-theme="dark"] .space-back-btn svg path {
    stroke: #eef0e9 !important;
  }
  
  /* Скролл ленты под шапку и инпут с блюром (контент скрывается за блюром) */
  .chat-view .message-list {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
    padding-top: calc(55px + max(8px, env(safe-area-inset-top, 8px)) + 14px) !important;
    padding-bottom: var(--chat-composer-padding, calc(58px + max(12px, env(safe-area-inset-bottom, 12px)) + 30px)) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 1 !important;
  }
  #discussion-view .message-list,
  #discussion-list {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
    padding-top: calc(55px + max(8px, env(safe-area-inset-top, 8px)) + 14px) !important;
    padding-bottom: var(--disc-composer-padding, calc(58px + max(12px, env(safe-area-inset-bottom, 12px)) + 30px)) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 1 !important;
  }
  .chat-view .message-list > *,
  #discussion-view .message-list > * {
    width: 100% !important;
    max-width: 590px !important;
  }
  #discussion-view .message-list > .comment-card,
  #discussion-list > .comment-card {
    width: fit-content !important;
    max-width: 88% !important;
  }
  #discussion-view .message-list > .comment-card:has(.comment-image-wrap),
  #discussion-list > .comment-card:has(.comment-image-wrap) {
    width: 88% !important;
    max-width: min(88%, 420px) !important;
  }
  #discussion-view .message-list > .comment-card.comment-card-ai,
  #discussion-list > .comment-card.comment-card-ai {
    align-self: flex-start !important;
    margin-right: auto !important;
    margin-left: 9px !important;
  }
  #discussion-view .message-list > .comment-card.comment-card-user,
  #discussion-list > .comment-card.comment-card-user {
    align-self: flex-end !important;
    margin-left: auto !important;
    margin-right: 9px !important;
  }
  #discussion-view .message-list > .comment-card.is-group-middle,
  #discussion-list > .comment-card.is-group-middle,
  #discussion-view .message-list > .comment-card.is-group-last,
  #discussion-list > .comment-card.is-group-last {
    margin-top: -5px !important;
  }
  #discussion-view .message-list > .original-post-banner,
  #discussion-list > .original-post-banner {
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
  }
  #discussion-view .message-list > .ai-typing-indicator,
  #discussion-list > .ai-typing-indicator {
    align-self: flex-start !important;
    margin-right: auto !important;
    margin-left: 0 !important;
  }
  
  /* Нижняя панель инпута с плавным темным прогрессивным блюром на мобилке */
  .chat-view .composer:not(.expanded):not(.collapsing),
  #discussion-view .composer:not(.expanded):not(.collapsing) {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-top: 24px !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px)) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    border: 0 !important;
    z-index: 25 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    pointer-events: none !important;
  }

  .chat-view .composer:not(.expanded):not(.collapsing)::before,
  #discussion-view .composer:not(.expanded):not(.collapsing)::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background: linear-gradient(
      to top,
      rgba(244, 243, 248, 0.75) 0%,
      rgba(244, 243, 248, 0.55) 45%,
      rgba(244, 243, 248, 0.20) 72%,
      rgba(244, 243, 248, 0) 100%
    ) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    -webkit-mask-image: linear-gradient(
      to top,
      #000 0%,
      #000 48%,
      rgba(0, 0, 0, 0.55) 70%,
      rgba(0, 0, 0, 0.15) 88%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to top,
      #000 0%,
      #000 48%,
      rgba(0, 0, 0, 0.55) 70%,
      rgba(0, 0, 0, 0.15) 88%,
      transparent 100%
    ) !important;
  }

  [data-theme="dark"] .chat-view .composer:not(.expanded):not(.collapsing)::before,
  [data-theme="dark"] #discussion-view .composer:not(.expanded):not(.collapsing)::before {
    background: linear-gradient(
      to top,
      rgba(18, 18, 26, 0.60) 0%,
      rgba(18, 18, 26, 0.42) 45%,
      rgba(18, 18, 26, 0.15) 72%,
      rgba(18, 18, 26, 0) 100%
    ) !important;
  }

  .chat-view .composer:not(.expanded):not(.collapsing) > *,
  #discussion-view .composer:not(.expanded):not(.collapsing) > * {
    pointer-events: auto !important;
    width: 100% !important;
    max-width: 590px !important;
  }

  .chat-view #message-input {
    height: auto !important;
    min-height: 36px !important;
    max-height: 120px !important;
    padding: 8px 4px !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .chat-view #message-input::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  .chat-view #message-input:empty::before,
  .chat-view #message-input[data-empty="true"]::before {
    content: attr(data-placeholder) !important;
    color: #838099 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: 4px !important;
    top: 8px !important;
    right: 4px !important;
    line-height: 20px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }
  .chat-view #message-input:not([data-empty="true"]):not(:empty)::before {
    display: none !important;
  }

  /* Full-width bottom sheet matching Figma 270:1578 (Frame 59 / Frame 21)
     Keep .composer container in normal flow with fixed height so .message-list
     and background posts never jump or create gaps when sheet expands or drags */
  .chat-view .composer.expanded,
  .chat-view .composer.collapsing {
    position: static !important;
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding: 4px 20px 14px !important;
    z-index: 60 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    transition: none !important;
  }

  .chat-view .composer.expanded .composer-bar,
  .chat-view .composer.collapsing .composer-bar {
    position: fixed !important;
    top: var(--chat-header-height, 65px) !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 16px 20px max(12px, env(safe-area-inset-bottom, 12px)) 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    border-radius: 22px 22px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.8) !important;
    background: #ffffff !important;
    box-shadow: 0 -4px 24px rgba(11, 10, 20, 0.08) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    touch-action: none !important;
    user-select: none;
    -webkit-user-select: none;
    z-index: 60 !important;
    transition: none !important;
  }

  /* Extended white background under sheet / behind keyboard */
  .chat-view .composer.expanded .composer-bar::after,
  .chat-view .composer.collapsing .composer-bar::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 120vh;
    background: #ffffff;
    pointer-events: none;
    z-index: 50;
  }
  [data-theme="dark"] .chat-view .composer.expanded .composer-bar::after,
  [data-theme="dark"] .chat-view .composer.collapsing .composer-bar::after,
  html[data-theme="dark"] .chat-view .composer.expanded .composer-bar::after,
  html[data-theme="dark"] .chat-view .composer.collapsing .composer-bar::after {
    background: #1a1a24;
  }

  body.composer-expanded .chat-view,
  body.composer-collapsing .chat-view {
    overflow: visible !important;
  }

  body.composer-expanded .chat-view::after,
  body.composer-collapsing .chat-view::after {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Sheet slide up & slide down animations (without locking forwards !important) */
  @keyframes composerCardExpandMobile {
    0% {
      transform: translate3d(0, 100%, 0);
    }
    100% {
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes composerCardCollapseMobile {
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(0, 100%, 0);
    }
  }

  .chat-view .composer.expanded:not(.collapsing) .composer-bar {
    animation: composerCardExpandMobile 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform;
  }

  .chat-view .composer.collapsing .composer-bar {
    animation: composerCardCollapseMobile 0.22s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: transform;
  }

  /* Expand button on mobile is always visible when collapsed (except recording or hidden) */
  .chat-view .composer:not(.expanded):not(.collapsing):not(.is-recording) .composer-expand-btn:not(.hidden) {
    display: flex !important;
  }
  .chat-view .composer.expanded .composer-expand-btn,
  .chat-view .composer.collapsing .composer-expand-btn,
  .chat-view .composer.is-recording .composer-expand-btn,
  .chat-view .composer-expand-btn.hidden {
    display: none !important;
  }

  /* Hide drag handle bar on mobile (Figma 270:1578 has clean top) */
  .chat-view .composer.expanded .composer-drag-handle,
  .chat-view .composer.collapsing .composer-drag-handle {
    display: none !important;
  }

  .chat-view .composer.expanded .composer-expanded-body,
  .chat-view .composer.collapsing .composer-expanded-body {
    display: flex !important;
    flex-direction: row !important;
    flex: 1 !important;
    min-height: 0 !important;
    width: 100% !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  .chat-view .composer.expanded .composer-left-col,
  .chat-view .composer.collapsing .composer-left-col {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    justify-content: space-between !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  .chat-view .composer.expanded .composer-editor-wrap,
  .chat-view .composer.collapsing .composer-editor-wrap {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .chat-view .composer.expanded .composer-title-input,
  .chat-view .composer.collapsing .composer-title-input {
    display: block !important;
    width: 100% !important;
    font-size: 22px !important;
    line-height: 28px !important;
    font-weight: 600 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .chat-view .composer.expanded .composer-title-input:focus,
  .chat-view .composer.expanded .composer-title-input:focus-visible,
  .chat-view .composer.expanded .composer-title-input:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .chat-view .composer.expanded .composer-rich-editor,
  .chat-view .composer.collapsing .composer-rich-editor {
    display: block !important;
    flex: 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 2px 4px 6px 4px !important;
    overflow-y: auto !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #4a4858 !important;
    box-sizing: border-box !important;
    touch-action: none !important;
    user-select: text;
    -webkit-user-select: text;
  }

  .chat-view .composer.expanded .composer-pill-toolbar,
  .chat-view .composer.collapsing .composer-pill-toolbar {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    flex: 0 0 52px !important;
    background: #f4f3f8 !important;
    border-radius: 9999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px 8px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }

  .chat-view .composer.expanded .composer-right-col,
  .chat-view .composer.collapsing .composer-right-col {
    width: 36px !important;
    min-width: 36px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    padding-bottom: 8px !important;
    box-sizing: border-box !important;
  }

  .chat-view .composer.expanded .composer-collapse-btn,
  .chat-view .composer.collapsing .composer-collapse-btn {
    position: static !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #4a4858 !important;
    margin-top: 2px !important;
  }

  .chat-view .composer.expanded .composer-expanded-send-btn,
  .chat-view .composer.collapsing .composer-expanded-send-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .chat-view .composer.expanded .composer-expanded-send-btn.active,
  .chat-view .composer.collapsing .composer-expanded-send-btn.active {
    background: #2850d1 !important;
    color: #f4f3f8 !important;
  }

  @keyframes composerBackdropFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  @keyframes composerBackdropFadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
  }

  body.composer-expanded .composer-backdrop {
    position: absolute !important;
    inset: 0 !important;
    z-index: 50 !important;
    background: rgba(11, 10, 20, 0.25) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    animation: composerBackdropFadeIn 0.3s ease forwards !important;
    pointer-events: auto !important;
  }

  body.composer-collapsing .composer-backdrop {
    position: absolute !important;
    inset: 0 !important;
    z-index: 50 !important;
    background: rgba(11, 10, 20, 0.25) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    animation: composerBackdropFadeOut 0.24s ease forwards !important;
    pointer-events: auto !important;
  }
}

@media (min-width: 721px) {
  /* Нижняя панель инпута с прогрессивным блюром на десктопе (точно как на мобилке) */
  .chat-view .composer:not(.expanded):not(.collapsing),
  #discussion-view .composer:not(.expanded):not(.collapsing) {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
    margin: 0 !important;
    padding-top: 28px !important;
    padding-bottom: 20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    border: 0 !important;
    z-index: 25 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    pointer-events: none !important;
    border-bottom-left-radius: 22px !important;
    border-bottom-right-radius: 22px !important;
  }

  .chat-view .composer:not(.expanded):not(.collapsing)::before,
  #discussion-view .composer:not(.expanded):not(.collapsing)::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background: linear-gradient(
      to top,
      rgba(244, 243, 248, 0.75) 0%,
      rgba(244, 243, 248, 0.55) 45%,
      rgba(244, 243, 248, 0.20) 72%,
      rgba(244, 243, 248, 0) 100%
    ) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    -webkit-mask-image: linear-gradient(
      to top,
      #000 0%,
      #000 48%,
      rgba(0, 0, 0, 0.55) 70%,
      rgba(0, 0, 0, 0.15) 88%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to top,
      #000 0%,
      #000 48%,
      rgba(0, 0, 0, 0.55) 70%,
      rgba(0, 0, 0, 0.15) 88%,
      transparent 100%
    ) !important;
    border-bottom-left-radius: inherit !important;
    border-bottom-right-radius: inherit !important;
  }

  [data-theme="dark"] .chat-view .composer:not(.expanded):not(.collapsing)::before,
  [data-theme="dark"] #discussion-view .composer:not(.expanded):not(.collapsing)::before {
    background: linear-gradient(
      to top,
      rgba(18, 18, 26, 0.60) 0%,
      rgba(18, 18, 26, 0.42) 45%,
      rgba(18, 18, 26, 0.15) 72%,
      rgba(18, 18, 26, 0) 100%
    ) !important;
  }

  .chat-view .composer:not(.expanded):not(.collapsing) .composer-bar,
  #discussion-view .composer:not(.expanded):not(.collapsing) .composer-bar,
  .chat-view .composer:not(.expanded):not(.collapsing) .composer-reply-container,
  #discussion-view .composer:not(.expanded):not(.collapsing) .composer-reply-container,
  .chat-view .composer:not(.expanded):not(.collapsing) .attachment-preview-container,
  #discussion-view .composer:not(.expanded):not(.collapsing) .attachment-preview-container {
    width: 100% !important;
    max-width: 590px !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
  }

  .chat-view .composer:not(.expanded):not(.collapsing):not(.multiline) .composer-bar,
  #discussion-view .composer:not(.expanded):not(.collapsing):not(.multiline) .composer-bar {
    border-radius: 9999px !important;
  }
  .chat-view .composer:not(.expanded):not(.collapsing).multiline .composer-bar,
  #discussion-view .composer:not(.expanded):not(.collapsing).multiline .composer-bar {
    border-radius: 26px !important;
  }

  .chat-view .composer.expanded,
  .chat-view .composer.collapsing {
    position: absolute !important;
    top: 68px !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 620px !important;
    height: auto !important;
    max-height: none !important;
    min-height: 480px !important;
    right: auto !important;
    z-index: 60 !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: none !important;
  }
  .chat-view .composer.expanded .composer-bar,
  .chat-view .composer.collapsing .composer-bar {
    height: 100% !important;
    min-height: 0 !important;
    padding: 20px 16px 16px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    box-shadow: 0 16px 48px rgba(11, 10, 20, 0.16) !important;
    transition: none !important;
  }

  @keyframes composerCardExpandDesktop {
    0% {
      transform: translate3d(0, calc(100% + 40px), 0);
      opacity: 0.85;
    }
    100% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }

  @keyframes composerCardCollapseDesktop {
    0% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
    100% {
      transform: translate3d(0, calc(100% + 40px), 0);
      opacity: 0.85;
    }
  }

  .chat-view .composer.expanded:not(.collapsing) .composer-bar {
    animation: composerCardExpandDesktop 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform, opacity;
  }

  .chat-view .composer.collapsing .composer-bar {
    animation: composerCardCollapseDesktop 0.22s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: transform, opacity;
  }

  .composer-drag-handle {
    display: none !important;
  }
  .chat-view .composer.expanded::after,
  .chat-view .composer.collapsing::after {
    display: none !important;
  }
}

[data-theme="dark"] .chat-view .composer.expanded .composer-bar,
html[data-theme="dark"] .chat-view .composer.expanded .composer-bar {
  background: #1a1a24 !important;
  border: 0 !important;
  box-shadow: none !important;
}

@media (min-width: 721px) {
  [data-theme="dark"] .chat-view .composer.expanded .composer-bar,
  html[data-theme="dark"] .chat-view .composer.expanded .composer-bar {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45) !important;
  }
}

.message-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
}

.message-status.is-sending {
  color: #838099;
}

[data-theme="dark"] .message-status.is-sending {
  color: var(--text-secondary);
}

/* Image Lightbox Modal */
.lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  opacity: 1;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  touch-action: pan-y;
}
.lightbox-backdrop.hidden {
  display: none !important;
  opacity: 0;
  pointer-events: none;
}
.lightbox-slider-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  user-select: none;
  touch-action: none;
  cursor: grab;
}
.lightbox-slider-viewport.is-dragging {
  cursor: grabbing;
}
.lightbox-slider-track {
  display: flex;
  height: 100%;
  width: 100%;
  will-change: transform;
  align-items: center;
}
.lightbox-slide {
  flex: 0 0 100vw;
  width: 100vw;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  box-sizing: border-box;
  position: relative;
}
.lightbox-slide-img {
  max-width: 96vw;
  max-height: calc(100dvh - 140px);
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.lightbox-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  padding-top: max(8px, env(safe-area-inset-top, 8px));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, transparent 100%);
  z-index: 1010;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.lightbox-counter {
  pointer-events: auto;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 9999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  user-select: none;
}
.lightbox-counter.hidden {
  display: none !important;
}
.lightbox-close {
  pointer-events: auto;
  position: static;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1010;
  transition: background 0.15s ease, transform 0.1s ease;
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}
.lightbox-close:active {
  transform: scale(0.95);
}
.lightbox-header-spacer {
  width: 44px;
  height: 44px;
  pointer-events: none;
}

/* Telegram-like Bottom Thumbnails Strip */
.lightbox-thumbnails-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 16px max(14px, env(safe-area-inset-bottom, 14px));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.45) 75%, transparent 100%);
  z-index: 1010;
  pointer-events: auto;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.lightbox-thumbnails-wrap.hidden {
  display: none !important;
}
.lightbox-thumbnails {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  padding: 4px 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.lightbox-thumbnails::-webkit-scrollbar {
  display: none;
}
.lightbox-thumb {
  flex: 0 0 auto;
  width: 42px;
  height: 52px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  opacity: 0.5;
  cursor: pointer;
  padding: 0;
  background: #181822;
  transition: opacity 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  box-sizing: border-box;
}
.lightbox-thumb:hover {
  opacity: 0.85;
}
.lightbox-thumb.is-active {
  border-color: #ffffff;
  opacity: 1;
  transform: scale(1.05);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}
.lightbox-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* UI toggle states (tap to hide / show) */
.lightbox-backdrop.lightbox-ui-hidden .lightbox-header {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-16px);
}
.lightbox-backdrop.lightbox-ui-hidden .lightbox-thumbnails-wrap {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

/* Flip arrows permanently removed */
.lightbox-nav-btn {
  display: none !important;
}

body.lightbox-open {
  overflow: hidden !important;
}

/* ==========================================================================
   Google Auth Screen (Figma 204:3678)
   ========================================================================== */
.auth-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  opacity: 1;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.auth-backdrop.hidden {
  display: none !important;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.auth-card {
  width: 100%;
  max-width: 360px;
  height: 100%;
  max-height: 750px;
  background: var(--background);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  position: relative;
  padding: 0;
}

.auth-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  text-align: center;
  box-sizing: border-box;
}

.auth-hero-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 6px;
}

.auth-brand-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0px;
}

.auth-mascot {
  width: 136.5px;
  height: 115.3px;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.auth-brand {
  font-family: 'Fredoka One Cyrillic', 'Fredoka One', 'Fredoka', cursive, sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0;
  color: #2850d1;
  margin-top: -18px;
}

.auth-welcome {
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 33px;
  height: 33px;
  min-height: 33px;
  color: #838099;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

.auth-welcome-cursor {
  display: inline-block;
  width: 2px;
  height: 25px;
  background-color: #2850d1;
  margin-left: 3px;
  border-radius: 1px;
  animation: authCursorBlink 0.8s infinite;
  vertical-align: middle;
  flex-shrink: 0;
}

@keyframes authCursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.auth-actions-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding-bottom: max(38px, env(safe-area-inset-bottom, 38px));
  box-sizing: border-box;
}

.auth-google-btn {
  width: 260px;
  height: 50px;
  min-height: 50px;
  background: #ffffff;
  color: #0b0a14;
  border-radius: 9999px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  box-shadow: none;
}

.auth-google-btn:hover {
  background: #fbfbfe;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.auth-google-btn:active {
  transform: scale(0.98);
}

.auth-google-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: block;
}

.auth-google-btn span {
  color: #0b0a14;
  white-space: nowrap;
}

.auth-guest-btn,
.auth-alt-btn {
  background: none;
  border: 0;
  padding: 0;
  height: 19px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  color: #838099;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.15s ease;
}

.auth-guest-btn:hover,
.auth-alt-btn:hover {
  opacity: 0.8;
}

.auth-guest-btn:active,
.auth-alt-btn:active {
  transform: scale(0.98);
}

@media (min-width: 768px) {
  .auth-card {
    max-width: 440px;
    max-height: 720px;
  }
  .auth-mascot {
    width: 156px;
    height: 132px;
  }
  .auth-brand {
    font-size: 34px;
    line-height: 40px;
    margin-top: -20px;
  }
  .auth-welcome {
    font-size: 30px;
    line-height: 36px;
    height: 36px;
    min-height: 36px;
  }
  .auth-welcome-cursor {
    height: 27px;
  }
  .auth-actions-group {
    gap: 18px;
    padding-bottom: 48px;
  }
  .auth-google-btn {
    width: 280px;
    height: 52px;
    font-size: 16px;
  }
  .auth-guest-btn,
  .auth-alt-btn {
    font-size: 16px;
  }
}

.settings-auth-row {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: auto;
  padding-top: 24px;
  padding-bottom: 20px;
  box-sizing: border-box;
}

.settings-logout-btn {
  background: transparent;
  border: 0;
  padding: 0;
  color: #e05757;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  cursor: pointer;
  width: auto;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: opacity 0.15s ease, transform 0.1s ease;
}

.settings-logout-btn:hover {
  opacity: 0.8;
  background: transparent;
}

.settings-logout-btn:active {
  transform: scale(0.98);
}

/* ==========================================================================
   Post Context Menu (Telegram-style: Reply, Copy, Edit, Delete)
   ========================================================================== */
.post-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(11, 10, 20, 0.45);
  opacity: 1;
  transition: opacity 0.18s ease;
}
.post-menu-backdrop.hidden {
  opacity: 0;
  pointer-events: none;
  display: none !important;
}

.post-menu {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 16px 48px rgba(11, 10, 20, 0.24);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 8px;
  min-width: 220px;
  box-sizing: border-box;
  z-index: 1520 !important;
  position: fixed;
  transform-origin: center center;
  animation: postMenuPop 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.post-menu-handle {
  display: none;
}

@keyframes postMenuPop {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.post-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-radius: 12px;
  color: #0b0a14;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.12s ease, transform 0.1s ease;
  box-sizing: border-box;
}

.post-menu-item:hover {
  background: #f4f3f8;
}

.post-menu-item:active {
  transform: scale(0.98);
}

.post-menu-item svg {
  flex-shrink: 0;
}

.post-menu-item.danger-text {
  color: #e53935 !important;
}

.post-menu-item.danger-text:hover {
  background: rgba(229, 57, 53, 0.08) !important;
}

.post-menu-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 6px 8px;
}

/* Dark mode for post menu */
[data-theme="dark"] .post-menu {
  background: #1a1a24;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .post-menu-item {
  color: #eef0e9;
}
[data-theme="dark"] .post-menu-item:hover {
  background: #2c2c3d;
}
[data-theme="dark"] .post-menu-divider {
  background: rgba(255, 255, 255, 0.08);
}

/* Mobile: Floating popup matching desktop */
@media (max-width: 720px) {
  .post-menu {
    border-radius: 18px !important;
    padding: 6px !important;
    min-width: 200px !important;
    max-width: calc(100vw - 24px) !important;
    box-shadow: 0 12px 36px rgba(11, 10, 20, 0.22) !important;
    animation: postMenuPop 0.16s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }
  .post-menu-handle {
    display: none !important;
  }
  .post-menu-item {
    padding: 10px 14px !important;
    font-size: 15px !important;
  }
}

/* ==========================================================================
   Composer Reply Banner (Telegram-style)
   ========================================================================== */
.composer-reply-container {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  margin-bottom: 6px;
  box-sizing: border-box;
  box-shadow: 0 2px 10px rgba(11, 10, 20, 0.05);
  border: 1px solid rgba(101, 127, 211, 0.15);
  animation: replyBannerIn 0.18s ease forwards;
}

@keyframes replyBannerIn {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

.composer-reply-container.hidden {
  display: none !important;
}

.composer.expanded .composer-reply-container,
.composer.collapsing .composer-reply-container,
.composer.expanded .composer-edit-container,
.composer.collapsing .composer-edit-container,
.composer.expanded .attachment-preview-container,
.composer.collapsing .attachment-preview-container {
  display: none !important;
}

.reply-indicator-bar {
  width: 3px;
  height: 32px;
  background: #657fd3;
  border-radius: 2px;
  flex-shrink: 0;
}

.reply-content-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.reply-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.reply-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #657fd3;
}

.reply-snippet {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #4a4858;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reply-cancel-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: #838099;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  padding: 0;
}

.reply-cancel-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #0b0a14;
}

[data-theme="dark"] .composer-reply-container {
  background: rgba(26, 26, 36, 0.95);
  border-color: rgba(101, 127, 211, 0.25);
}
[data-theme="dark"] .reply-snippet {
  color: #c5c4d4;
}
[data-theme="dark"] .reply-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* ==========================================================================
   Post Reply Badge in Card & Post Highlighting
   ========================================================================== */
.post-reply-badge {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 8px;
  padding: 6px 10px;
  background: rgba(101, 127, 211, 0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
  user-select: none;
}

.post-reply-badge:hover {
  background: rgba(101, 127, 211, 0.15);
}

.post-reply-badge:active {
  transform: scale(0.99);
}

.post-reply-bar {
  width: 3px;
  border-radius: 2px;
  background: #657fd3;
  flex-shrink: 0;
}

.post-reply-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

.post-reply-label {
  font-size: 11px;
  font-weight: 600;
  color: #657fd3;
}

.post-reply-text {
  font-size: 13px;
  color: #4a4858;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="dark"] .post-reply-badge {
  background: rgba(101, 127, 211, 0.14);
}
[data-theme="dark"] .post-reply-text {
  color: #c5c4d4;
}

.post-highlight {
  animation: postHighlightAnim 1.6s ease;
}

@keyframes postHighlightAnim {
  0%, 25% {
    box-shadow: 0 0 0 2.5px #657fd3, 0 8px 24px rgba(101, 127, 211, 0.25) !important;
    background-color: rgba(101, 127, 211, 0.08) !important;
  }
  100% {
    box-shadow: 0 4px 16px rgba(11,10,20,0.04);
    background-color: #ffffff;
  }
}

[data-theme="dark"] .post-highlight {
  animation: postHighlightAnimDark 1.6s ease;
}

@keyframes postHighlightAnimDark {
  0%, 25% {
    box-shadow: 0 0 0 2.5px #657fd3, 0 8px 24px rgba(101, 127, 211, 0.35) !important;
    background-color: rgba(101, 127, 211, 0.15) !important;
  }
  100% {
    background-color: #1a1a24;
  }
}

#action-textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
  background: var(--surface, #ffffff);
  color: var(--text-primary, #0b0a14);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  resize: vertical;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#action-textarea:focus {
  border-color: #657fd3;
  box-shadow: 0 0 0 2px rgba(101, 127, 211, 0.2);
}

[data-theme="dark"] #action-textarea {
  background: #12121a;
  border-color: rgba(255, 255, 255, 0.12);
  color: #eef0e9;
}

/* ==========================================================================
   Selected Post Pop-Out & Full Background Blur (Telegram Style)
   ========================================================================== */
body.is-post-menu-open .chat-panel-slot,
body.is-post-menu-open #chat-view,
body.is-post-menu-open .chat-view {
  z-index: 1600 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

body.is-post-menu-open .message-list,
#chat-view.is-post-menu-open .message-list {
  z-index: 1600 !important;
}

body.is-post-menu-open .chat-header-bar,
body.is-post-menu-open .chat-header,
body.is-post-menu-open .composer,
body.is-post-menu-open #composer,
body.is-post-menu-open .sidebar {
  opacity: 0.25 !important;
  pointer-events: none !important;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.is-post-menu-open .message-list > *:not(.is-context-selected) {
  opacity: 0.22 !important;
  transform: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  pointer-events: none !important;
  will-change: opacity;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes postPopOutScale {
  0% {
    transform: scale(1) translateY(0);
    box-shadow: 0 4px 16px rgba(11, 10, 20, 0.04);
  }
  100% {
    transform: scale(1.02) translateY(-2px);
    box-shadow: 0 16px 44px rgba(11, 10, 20, 0.16), 0 4px 14px rgba(11, 10, 20, 0.06);
  }
}

.post-card.is-context-selected,
.post-compact.is-context-selected,
.comment-card.is-context-selected,
.message-list > .is-context-selected {
  position: relative !important;
  z-index: 1620 !important;
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  animation: postPopOutScale 0.35s cubic-bezier(0.2, 0.8, 0.25, 1) forwards !important;
  pointer-events: auto !important;
  will-change: transform, box-shadow;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.25, 1),
              box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.25, 1) !important;
}

[data-theme="dark"] .post-card.is-context-selected,
[data-theme="dark"] .post-compact.is-context-selected,
[data-theme="dark"] .comment-card.is-context-selected,
[data-theme="dark"] .message-list > .is-context-selected {
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.7), 0 4px 16px rgba(0, 0, 0, 0.45) !important;
}


.is-context-selected * {
  filter: none !important;
  -webkit-filter: none !important;
}

.is-context-selected .post-card-text,
.is-context-selected .post-card-title,
.is-context-selected .post-compact-text,
.is-context-selected .comment-card-text {
  opacity: 1 !important;
}

.post-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1500 !important;
  background: rgba(11, 10, 20, 0.45) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1;
  transition: opacity 0.2s ease;
  pointer-events: auto;
}

.post-menu-backdrop.hidden {
  opacity: 0;
  pointer-events: none;
  display: none !important;
}

body.is-post-menu-open .space-bg-overlay {
  background: rgba(11, 10, 20, 0.5) !important;
  opacity: 1 !important;
}

.post-menu {
  z-index: 1700 !important;
  position: fixed !important;
}

.post-menu.hidden {
  display: none !important;
}

.composer-reply-container {
  pointer-events: auto !important;
  z-index: 1660 !important;
}

/* Telegram-like sticky & inline chat dates */
.chat-date-divider {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  align-self: center !important;
  margin: 14px 0 8px 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

.chat-date-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 13px !important;
  min-height: 24px !important;
  box-sizing: border-box !important;
  background: rgba(11, 10, 20, 0.44) !important;
  color: #ffffff !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  letter-spacing: -0.1px !important;
  border-radius: 9999px !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.12) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: manipulation !important;
  transition: background-color 0.15s ease, transform 0.12s ease, opacity 0.15s ease !important;
}

.chat-date-pill:hover {
  background: rgba(11, 10, 20, 0.6) !important;
}

.chat-date-pill:active {
  transform: scale(0.96) !important;
}

[data-theme="dark"] .chat-date-pill {
  background: rgba(28, 28, 38, 0.68) !important;
  color: #f5f4f8 !important;
  border: 0.5px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .chat-date-pill:hover {
  background: rgba(38, 38, 52, 0.85) !important;
}

.chat-floating-date {
  position: absolute !important;
  top: 78px !important;
  left: 50% !important;
  transform: translate3d(-50%, -6px, 0) scale(0.92) !important;
  z-index: 25 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s ease !important;
  will-change: opacity, transform !important;
}

.chat-floating-date.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(-50%, 0, 0) scale(1) !important;
}

.chat-floating-date:hover {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.is-post-menu-open .chat-floating-date,
body.composer-expanded .chat-floating-date {
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 768px) {
  .chat-floating-date {
    top: calc(max(10px, env(safe-area-inset-top, 10px)) + 63px) !important;
  }
}

/* Ensure bold brand logo across all viewports & themes */
.brand,
.brand-name-mobile,
.brand-name-desktop,
.desktop-brand,
.auth-brand {
  font-family: 'Fredoka One Cyrillic', 'Fredoka One', 'Fredoka', cursive, sans-serif !important;
  font-weight: 700 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-theme="dark"] .brand,
[data-theme="dark"] .brand-name-mobile,
[data-theme="dark"] .brand-name-desktop,
[data-theme="dark"] .desktop-brand {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .mobile-home-icon,
[data-theme="dark"] .mobile-settings-button,
[data-theme="dark"] .desktop-icon-btn {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .mobile-home-icon svg path,
[data-theme="dark"] .mobile-settings-button svg path,
[data-theme="dark"] .desktop-icon-btn svg path {
  stroke: var(--text-primary) !important;
}

/* Onboarding Screen - Figma node 485:1988 (Frame 75) */
.onboarding-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: #f4f3f8;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  overflow: hidden;
}

.onboarding-backdrop.hidden {
  display: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.onboarding-card {
  width: 100%;
  max-width: 420px;
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 16px 20px calc(14px + env(safe-area-inset-bottom, 0px)) 20px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.onboarding-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-shrink: 0;
  z-index: 2;
}

.onboarding-brand {
  font-family: 'Fredoka One Cyrillic', 'Fredoka One', 'Fredoka', cursive, sans-serif !important;
  font-size: 30px;
  font-weight: 700;
  color: #2850d1;
  line-height: 1;
  letter-spacing: -0.5px;
}

.onboarding-skip-btn {
  background: none;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #838099;
  cursor: pointer;
  padding: 8px 4px;
  transition: color 0.15s ease, transform 0.1s ease;
}

.onboarding-skip-btn:hover {
  color: #0b0a14;
}

.onboarding-skip-btn:active {
  transform: scale(0.96);
}


.onboarding-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  flex: 1;
  width: 100%;
  text-align: center;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.onboarding-text-wrap {
  width: 100%;
  max-width: 340px;
  height: 110px;
  min-height: 108px;
  max-height: 112px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0;
  box-sizing: border-box;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.onboarding-typing-text {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.24;
  color: #4a4858;
  margin: 0;
  padding: 0;
  white-space: pre-line;
  word-break: break-word;
  text-align: center;
}

.onboarding-typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background-color: #2850d1;
  margin-left: 3px;
  vertical-align: -0.15em;
  animation: onboardingBlink 0.75s infinite;
  transition: opacity 0.3s ease;
}

.onboarding-typing-cursor.fade-out {
  opacity: 0;
}

@keyframes onboardingBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.onboarding-mascot-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 130px;
  max-height: 220px;
  margin-top: 0;
  margin-bottom: 8px;
}

.onboarding-mascot {
  height: 100%;
  max-height: 220px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.05));
  animation: ariIdle 3s ease-in-out infinite;
  transform-origin: 50% 90%;
  will-change: transform;
}

.onboarding-mascot.is-talking {
  animation: ariTalk 0.65s ease-in-out infinite alternate;
}

.onboarding-mascot.ari-pulse {
  animation: ariPulse 0.38s cubic-bezier(0.25, 1, 0.5, 1);
}

.onboarding-mascot.ari-jump {
  animation: ariJump 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.onboarding-mascot.ari-celebrate {
  animation: ariCelebrate 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.onboarding-mascot.ari-pose-change {
  animation: ariBouncyPose 0.58s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards !important;
}

.empty-state-mascot.ari-pose-change {
  animation: ariSlowGentlePose 1.16s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards !important;
}

@keyframes ariSlowGentlePose {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  16% {
    transform: translateY(3px) scale(1.05, 0.95);
  }
  48% {
    transform: translateY(-14px) scale(0.96, 1.05) rotate(-1.5deg);
  }
  74% {
    transform: translateY(2px) scale(1.03, 0.97) rotate(0.8deg);
  }
  88% {
    transform: translateY(-1px) scale(0.99, 1.01) rotate(-0.2deg);
  }
  100% {
    transform: translateY(0) scale(1, 1) rotate(0deg);
  }
}

@keyframes ariBouncyPose {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  16% {
    transform: translateY(6px) scale(1.12, 0.88);
  }
  48% {
    transform: translateY(-28px) scale(0.92, 1.1) rotate(-3deg);
  }
  74% {
    transform: translateY(4px) scale(1.08, 0.92) rotate(1.5deg);
  }
  88% {
    transform: translateY(-2px) scale(0.98, 1.02) rotate(-0.5deg);
  }
  100% {
    transform: translateY(0) scale(1, 1) rotate(0deg);
  }
}

@keyframes ariIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes ariTalk {
  0% { transform: translateY(0) scale(1, 1); }
  100% { transform: translateY(-2.5px) scale(1.015, 0.985); }
}

@keyframes ariPulse {
  0% { transform: translateY(0) scale(1, 1); }
  45% { transform: translateY(-2.5px) scale(1.015, 0.985); }
  100% { transform: translateY(0) scale(1, 1); }
}

@keyframes ariJump {
  0% { transform: translateY(0) scale(1, 1); }
  45% { transform: translateY(-8px) scale(0.98, 1.03) rotate(-2deg); }
  75% { transform: translateY(-1px) scale(1.02, 0.98) rotate(1deg); }
  100% { transform: translateY(0) scale(1, 1) rotate(0deg); }
}

@keyframes ariCelebrate {
  0% { transform: translateY(0) scale(1, 1); }
  30% { transform: translateY(-5px) scale(1.02, 0.98) rotate(2deg); }
  60% { transform: translateY(-7px) scale(0.98, 1.02) rotate(-1.5deg); }
  85% { transform: translateY(-1px) scale(1.01, 0.99) rotate(0.5deg); }
  100% { transform: translateY(0) scale(1, 1) rotate(0deg); }
}

.onboarding-footer {
  width: 100%;
  min-height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  box-sizing: border-box;
  flex-shrink: 0;
}

.onboarding-next-btn {
  background: transparent;
  border: 0;
  outline: none;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  color: #838099;
  cursor: pointer;
  height: 48px;
  padding: 0 16px;
  border-radius: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.onboarding-next-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.onboarding-next-btn:hover {
  color: #0b0a14;
  background: transparent;
}

.onboarding-next-btn:active {
  transform: scale(0.97);
  background: transparent;
}

.onboarding-next-btn.has-value {
  color: #0b0a14;
}

[data-theme="dark"] .onboarding-next-btn.has-value {
  color: #eef0e9;
}

.onboarding-next-btn.hidden {
  display: none !important;
}

.onboarding-input-bar {
  width: 100%;
  max-width: 320px;
  height: 58px;
  background: #ffffff;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 10px 15px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

.onboarding-input-bar.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.onboarding-input-bar.hidden {
  display: none !important;
}

.onboarding-input-bar:focus-within {
  border-color: rgba(40, 80, 209, 0.3);
  box-shadow: 0 4px 20px rgba(40, 80, 209, 0.08);
}

.onboarding-name-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none !important;
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  box-shadow: none !important;
  background: transparent !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  color: #1d1b20;
  padding: 0;
  margin: 0;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.onboarding-name-input:focus,
.onboarding-name-input:focus-visible,
.onboarding-name-input:active {
  border: none !important;
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.onboarding-name-input::placeholder {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #838099;
  opacity: 1;
}

.onboarding-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 30px;
  border: none;
  outline: none;
  background: #838099;
  opacity: 0.5;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  padding: 0 0 0 2px;
  box-sizing: border-box;
  transition: background 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.onboarding-send-btn svg {
  display: block;
}

.onboarding-send-btn.active {
  background: #2850d1;
  opacity: 1;
  cursor: pointer;
}

.onboarding-send-btn.active:hover {
  background: #1f42b3;
  transform: scale(1.04);
}

.onboarding-send-btn.active:active {
  transform: scale(0.96);
}

/* Dark theme for onboarding */
[data-theme="dark"] .onboarding-backdrop {
  background: #12111a;
}
[data-theme="dark"] .onboarding-brand {
  color: #657fd3;
}
[data-theme="dark"] .onboarding-skip-btn {
  color: #838099;
}
[data-theme="dark"] .onboarding-skip-btn:hover {
  color: #eef0e9;
}
[data-theme="dark"] .onboarding-typing-text {
  color: #eef0e9;
}
[data-theme="dark"] .onboarding-next-btn {
  color: #838099;
}
[data-theme="dark"] .onboarding-next-btn:hover {
  color: #eef0e9;
  background: transparent;
}
[data-theme="dark"] .onboarding-next-btn:active {
  background: transparent;
}
[data-theme="dark"] .onboarding-input-bar {
  background: #232230;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .onboarding-input-bar:focus-within {
  border-color: rgba(101, 127, 211, 0.4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .onboarding-name-input {
  color: #eef0e9;
}
[data-theme="dark"] .onboarding-name-input::placeholder {
  color: #838099;
}

.onboarding-action-group {
  width: 100%;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.onboarding-action-group.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.onboarding-action-group.hidden {
  display: none !important;
}

.onboarding-create-btn {
  width: 100%;
  min-height: 50px;
  height: 50px;
  background: #2850d1;
  color: #ffffff;
  border: none;
  border-radius: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  padding: 10px 16px;
  box-sizing: border-box;
  box-shadow: 0 4px 14px rgba(40, 80, 209, 0.25);
  transition: background-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.onboarding-create-btn:hover {
  background: #1f42b3;
  box-shadow: 0 6px 18px rgba(40, 80, 209, 0.35);
  transform: scale(1.02);
}

.onboarding-create-btn:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(40, 80, 209, 0.2);
}

.onboarding-plus-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.onboarding-action-group .onboarding-skip-btn {
  background: none;
  border: 0;
  font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #838099;
  cursor: pointer;
  padding: 4px 16px;
  border-radius: 20px;
  transition: color 0.15s ease, transform 0.1s ease, background-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.onboarding-action-group .onboarding-skip-btn:hover {
  color: #0b0a14;
  background: rgba(0, 0, 0, 0.04);
}

.onboarding-action-group .onboarding-skip-btn:active {
  transform: scale(0.96);
}


[data-theme="dark"] .onboarding-create-btn {
  background: #3865f5;
  box-shadow: 0 4px 16px rgba(56, 101, 245, 0.35);
}

[data-theme="dark"] .onboarding-create-btn:hover {
  background: #2b55e5;
}

[data-theme="dark"] .onboarding-action-group .onboarding-skip-btn {
  color: #838099;
}

[data-theme="dark"] .onboarding-action-group .onboarding-skip-btn:hover {
  color: #eef0e9;
  background: rgba(255, 255, 255, 0.06);
}

/* Step 5: Create First Space inside Onboarding (Figma 732:2393) */
.onboarding-text-highlight {
  color: inherit !important;
}

[data-theme="dark"] .onboarding-text-highlight {
  color: inherit !important;
}

.onboarding-space-creator {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 320px;
  gap: 12px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-16px) scale(0.96);
  transition: max-height 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              margin 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  flex-shrink: 0;
  margin: 0;
}

.onboarding-space-creator.visible {
  max-height: 220px;
  opacity: 1;
  overflow: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  margin: 4px 0 10px 0;
}

.onboarding-space-creator.hidden {
  display: none !important;
}

.onboarding-space-avatar-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.onboarding-space-creator.phase-avatar .onboarding-space-avatar-wrap {
  opacity: 1;
  transform: scale(1);
}

.onboarding-space-avatar-btn {
  width: 116px;
  height: 116px;
  border-radius: 36px;
  border: 2px solid #e8e9ff;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 4px 1.3px rgba(33, 60, 148, 0.06);
  transform: rotate(10deg);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.onboarding-space-avatar-btn:hover {
  border-color: #657fd3;
  transform: rotate(10deg) scale(1.03);
  box-shadow: 0 6px 14px rgba(33, 60, 148, 0.12);
}

.onboarding-space-avatar-btn:active {
  transform: rotate(10deg) scale(0.97);
}

.onboarding-space-avatar-preview {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 36px;
  overflow: hidden;
}

.onboarding-space-avatar-preview img,
.onboarding-space-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 36px;
  display: block;
}

.onboarding-space-add-icon {
  width: 50px;
  height: 50px;
  display: block;
}

.onboarding-space-name-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.onboarding-space-creator.phase-input .onboarding-space-name-wrap {
  opacity: 1;
  transform: translateY(0);
}

.onboarding-space-name-bar {
  width: 246px;
  height: 48px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(131, 128, 153, 0.32);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.onboarding-space-name-bar:focus-within {
  border-color: rgba(131, 128, 153, 0.4) !important;
  box-shadow: none !important;
  outline: none !important;
}

.onboarding-space-name-input {
  flex: 1;
  min-width: 0;
  border: none !important;
  background: transparent;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #1d1b20;
  outline: none !important;
  box-shadow: none !important;
  padding: 0;
  margin: 0;
  -webkit-focus-ring-color: transparent !important;
  -webkit-tap-highlight-color: transparent !important;
}

.onboarding-space-name-input:focus,
.onboarding-space-name-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.onboarding-space-name-input::placeholder {
  color: #9fa1ca;
}

.onboarding-space-pencil-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  pointer-events: none;
}

/* Mascot descend animation on Step 5 */
/* Step 4: Mascot silky-smooth glide downward */
.onboarding-card[data-step="4"] .onboarding-mascot-wrap {
  transition: margin 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.onboarding-card[data-step="4"] .onboarding-mascot {
  width: 153px;
  height: 208px;
  max-height: 208px;
  object-fit: contain;
  filter: none;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.onboarding-card[data-step="4"] .onboarding-mascot-wrap.mascot-descended {
  min-height: 208px;
  max-height: 208px;
  margin-top: 10px;
  margin-bottom: 8px;
}

.onboarding-card[data-step="4"].creator-phase-active .onboarding-text-wrap {
  height: auto;
  min-height: 75px;
  max-height: 85px;
  margin-bottom: 12px;
}

/* Dark mode for space creator */
[data-theme="dark"] .onboarding-space-avatar-btn {
  background: #1c1a29;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .onboarding-space-avatar-btn:hover {
  border-color: #657fd3;
}

[data-theme="dark"] .onboarding-space-name-bar {
  background: #1c1a29;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .onboarding-space-name-bar:focus-within {
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
  outline: none !important;
}

[data-theme="dark"] .onboarding-space-name-input {
  color: #eef0e9;
}

[data-theme="dark"] .onboarding-space-name-input::placeholder {
  color: #7c7a94;
}

[data-theme="dark"] .onboarding-space-pencil-icon svg path {
  stroke: #7c7a94;
}

/* Step 4: Hide any skip button completely on Step 4 (Figma 732:2393) */
.onboarding-card[data-step="4"] #onboarding-skip-btn,
.onboarding-card[data-step="4"] .onboarding-skip-btn {
  display: none !important;
}

/* Step 4: Next Button - Grey capsule by default, vibrant blue when text appears (Image 2) */
.onboarding-card[data-step="4"] #onboarding-next-btn,
.onboarding-card[data-step="4"] .onboarding-next-btn {
  background: #ecebf4 !important;
  color: #838099 !important;
  border-radius: 9999px !important;
  width: 100% !important;
  max-width: 246px !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: -0.2px !important;
  box-shadow: none !important;
  border: none !important;
  cursor: pointer !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  margin: 0 auto !important;
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.15s ease,
              opacity 0.25s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

.onboarding-card[data-step="4"] #onboarding-next-btn:hover,
.onboarding-card[data-step="4"] .onboarding-next-btn:hover {
  background: #e2e1ec !important;
  color: #636177 !important;
}

.onboarding-card[data-step="4"] #onboarding-next-btn.has-value,
.onboarding-card[data-step="4"] .onboarding-next-btn.has-value {
  background: #2850d1 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(40, 80, 209, 0.25) !important;
}

.onboarding-card[data-step="4"] #onboarding-next-btn.has-value:hover,
.onboarding-card[data-step="4"] .onboarding-next-btn.has-value:hover {
  background: #2044b8 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(40, 80, 209, 0.35) !important;
}

.onboarding-card[data-step="4"] #onboarding-next-btn.has-value:active,
.onboarding-card[data-step="4"] .onboarding-next-btn.has-value:active {
  background: #18379c !important;
  color: #ffffff !important;
  transform: scale(0.97) !important;
}

[data-theme="dark"] .onboarding-card[data-step="4"] #onboarding-next-btn,
[data-theme="dark"] .onboarding-card[data-step="4"] .onboarding-next-btn {
  background: #232133 !important;
  color: #6f6d85 !important;
  box-shadow: none !important;
}

[data-theme="dark"] .onboarding-card[data-step="4"] #onboarding-next-btn.has-value,
[data-theme="dark"] .onboarding-card[data-step="4"] .onboarding-next-btn.has-value {
  background: #2850d1 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(40, 80, 209, 0.35) !important;
}

/* Step 4: Hide mascot & button ONLY when keyboard is actually open (measured by viewport shrink) */
.onboarding-card[data-step="4"].keyboard-open .onboarding-mascot-wrap,
body.keyboard-visible .onboarding-card[data-step="4"] .onboarding-mascot-wrap {
  display: none !important;
  opacity: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

.onboarding-card[data-step="4"].keyboard-open #onboarding-next-btn,
body.keyboard-visible .onboarding-card[data-step="4"] #onboarding-next-btn {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.onboarding-card[data-step="4"].keyboard-open .onboarding-body {
  overflow: hidden !important;
  justify-content: center !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.onboarding-card[data-step="4"].keyboard-open .onboarding-body::-webkit-scrollbar {
  display: none !important;
}

.onboarding-card[data-step="4"].keyboard-open .onboarding-text-wrap {
  height: auto !important;
  min-height: unset !important;
  max-height: unset !important;
  margin-bottom: 8px !important;
}

.onboarding-card[data-step="4"].keyboard-open .onboarding-typing-text {
  font-size: 22px !important;
}

.onboarding-card[data-step="4"].keyboard-open .onboarding-space-creator {
  margin: 0 0 6px 0 !important;
  gap: 12px !important;
}

.onboarding-card[data-step="4"].keyboard-open .onboarding-space-avatar-btn {
  width: 116px !important;
  height: 116px !important;
  border-radius: 36px !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   Space Profile Screen (Figma 777:2599)
/* ==========================================================================
   Space Profile Screen (Figma 777:2599 & Desktop Telegram Style)
   ========================================================================== */
.space-profile-desktop-header {
  display: none;
}

@media (min-width: 721px) {
  .space-profile-desktop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 54px;
    min-height: 54px;
    padding: 0 16px;
    box-sizing: border-box;
    background: #ffffff;
    border-bottom: 1px solid rgba(131, 128, 153, 0.14);
    position: sticky;
    top: 0;
    z-index: 10;
    flex-shrink: 0;
    border-top-right-radius: 22px;
  }

  [data-theme="dark"] .space-profile-desktop-header {
    background: #1a1a24;
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  .space-profile-desktop-close,
  .space-profile-desktop-edit-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #4a4858;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.15s ease, transform 0.1s ease;
  }

  [data-theme="dark"] .space-profile-desktop-close,
  [data-theme="dark"] .space-profile-desktop-edit-btn {
    color: rgba(255, 255, 255, 0.85);
  }

  .space-profile-desktop-close:hover,
  .space-profile-desktop-edit-btn:hover {
    background: rgba(74, 72, 88, 0.08);
  }

  [data-theme="dark"] .space-profile-desktop-close:hover,
  [data-theme="dark"] .space-profile-desktop-edit-btn:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .space-profile-desktop-close:active,
  .space-profile-desktop-edit-btn:active {
    transform: scale(0.92);
  }

  .space-profile-desktop-header-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #0b0a14;
    flex: 1;
    margin-left: 12px;
    text-align: left;
  }

  [data-theme="dark"] .space-profile-desktop-header-title {
    color: #ffffff;
  }

  .chat-panel-slot {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(64, 64, 64, 0.1);
  }

  [data-theme="dark"] .chat-panel-slot {
    background: #1a1a24;
    border-color: rgba(255, 255, 255, 0.08);
  }

  .chat-panel-slot #chat-view {
    transition: right 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.28s ease;
  }

  @media (min-width: 1001px) {
    .chat-panel-slot.space-profile-open #chat-view {
      right: 400px !important;
      width: auto !important;
      border-top-right-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
    }
  }

  .chat-panel-slot #space-profile-view {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 400px !important;
    max-width: 100% !important;
    height: 100% !important;
    z-index: 25 !important;
    background: #ffffff !important;
    border-left: 1px solid rgba(131, 128, 153, 0.14) !important;
    box-shadow: -8px 0 28px rgba(11, 10, 20, 0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-top-right-radius: 22px !important;
    border-bottom-right-radius: 22px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @media (max-width: 1000px) {
    .chat-panel-slot #space-profile-view {
      border-radius: 22px !important;
      border-left: none !important;
    }
    .chat-panel-slot #space-profile-view .space-profile-desktop-header {
      border-top-left-radius: 22px !important;
      border-top-right-radius: 22px !important;
    }
  }

  [data-theme="dark"] .chat-panel-slot #space-profile-view {
    background: #1a1a24 !important;
    border-left-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.35) !important;
  }

  .chat-panel-slot.space-profile-open #space-profile-view {
    transform: translate3d(0, 0, 0) !important;
  }

  .chat-panel-slot #space-profile-view.hidden {
    display: none !important;
  }

  .chat-panel-slot #space-profile-view .space-profile-banner .space-profile-circle-btn {
    display: none !important;
  }

  .chat-panel-slot #space-profile-view .space-profile-banner {
    height: 280px;
    min-height: 280px;
    max-height: 280px;
  }

  .chat-panel-slot #space-profile-view .space-profile-scroll-wrap {
    max-width: 100%;
    padding: 12px 14px 24px 14px;
    flex: 1;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    border-bottom-right-radius: 22px;
    scrollbar-width: thin;
    scrollbar-color: rgba(131, 128, 153, 0.25) transparent;
  }

  .chat-panel-slot #space-profile-view .space-profile-scroll-wrap::-webkit-scrollbar {
    width: 6px;
  }
  .chat-panel-slot #space-profile-view .space-profile-scroll-wrap::-webkit-scrollbar-track {
    background: transparent;
    margin-bottom: 12px;
  }
  .chat-panel-slot #space-profile-view .space-profile-scroll-wrap::-webkit-scrollbar-thumb {
    background: rgba(131, 128, 153, 0.25);
    border-radius: 4px;
  }
  .chat-panel-slot #space-profile-view .space-profile-scroll-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(131, 128, 153, 0.45);
  }

  .chat-panel-slot #space-profile-view .space-profile-tab {
    background: transparent !important;
    color: #838099 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
  .chat-panel-slot #space-profile-view .space-profile-tab:hover {
    color: #4a4858 !important;
  }
  .chat-panel-slot #space-profile-view .space-profile-tab.active {
    background: #657fd3 !important;
    color: #ffffff !important;
  }
  [data-theme="dark"] .chat-panel-slot #space-profile-view .space-profile-tab {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.6) !important;
  }
  [data-theme="dark"] .chat-panel-slot #space-profile-view .space-profile-tab:hover {
    color: rgba(255, 255, 255, 0.9) !important;
  }
  [data-theme="dark"] .chat-panel-slot #space-profile-view .space-profile-tab.active {
    background: #657fd3 !important;
    color: #ffffff !important;
  }
}

@media (max-width: 720px) {
  .space-profile-desktop-header {
    display: none !important;
  }

  .space-profile-view,
  #space-profile-view {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100svh;
    max-width: 100%;
    z-index: 100;
    background: #f4f3f8;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    -webkit-overflow-scrolling: touch;
  }

  [data-theme="dark"] #space-profile-view {
    background: #12121a;
  }

  #space-profile-view.hidden {
    display: none !important;
  }

  #space-profile-view.slide-in {
    display: flex !important;
    animation: settingsSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    box-shadow: -8px 0 24px rgba(11, 10, 20, 0.08);
  }

  #space-profile-view.slide-out {
    display: flex !important;
    animation: settingsSlideOut 0.25s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    box-shadow: -8px 0 24px rgba(11, 10, 20, 0.08);
  }
}

  .space-profile-scroll-wrap {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 10px 10px calc(24px + env(safe-area-inset-bottom, 16px)) 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }

  /* Banner Frame 40 (340x360, radius 12, border #838099 20%) */
  .space-profile-banner {
    position: relative;
    width: 100%;
    height: 360px;
    min-height: 360px;
    max-height: 360px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(131, 128, 153, 0.2);
    background: #232230;
    box-sizing: border-box;
  }

  .space-profile-banner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }

  .space-profile-banner-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #657fd3 0%, #2850d1 100%);
    z-index: 1;
  }

  .space-profile-symbol-letter {
    font-size: 72px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    user-select: none;
  }

  /* Linear Gradient Rectangle 89 (rgba(0,0,0,0.16) to rgba(28,28,28,1.0) at 0.77 opacity) */
  .space-profile-gradient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(20, 20, 20, 0.18) 40%, rgba(28, 28, 28, 0.88) 100%);
  }

  /* Buttons inside banner: 44x44, radius 30 (circle), background rgba(255, 255, 255, 0.8) */
  .space-profile-circle-btn {
    position: absolute;
    top: 10px;
    width: 44px;
    height: 44px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    padding: 0;
    transition: transform 0.15s ease, background-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .space-profile-circle-btn:active {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.95);
  }

  .space-profile-back-btn {
    left: 10px;
  }

  .space-profile-edit-btn {
    right: 10px;
  }

  .space-profile-circle-btn svg {
    display: block;
  }

  /* Title at bottom-left: Inter Medium 30px, color rgba(255, 255, 255, 0.8) */
  .space-profile-name-wrap {
    position: absolute;
    bottom: 16px;
    left: 20px;
    right: 20px;
    z-index: 3;
  }

  .space-profile-title {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.1;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    word-break: break-word;
  }

  /* Tabs Frame 2608499: height 28px, gap 4px */
  .space-profile-tabs-wrap {
    margin-top: 10px;
    margin-bottom: 8px;
    width: 100%;
    overflow: hidden;
  }

  .space-profile-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px 0;
  }

  .space-profile-tabs::-webkit-scrollbar {
    display: none;
  }

  .space-profile-tab {
    height: 28px;
    padding: 6px 16px;
    border-radius: 9999px;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    color: #838099 !important;
    flex-shrink: 0;
    transition: background-color 0.18s ease, color 0.18s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .space-profile-tab:hover {
    color: #4a4858 !important;
  }

  .space-profile-tab.active {
    background: #657fd3 !important;
    color: #ffffff !important;
    font-weight: 400;
  }

  .space-profile-tab.active:hover {
    color: #ffffff !important;
  }

  [data-theme="dark"] .space-profile-tab {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.6) !important;
  }

  [data-theme="dark"] .space-profile-tab:hover {
    color: rgba(255, 255, 255, 0.9) !important;
  }

  [data-theme="dark"] .space-profile-tab.active {
    background: #657fd3 !important;
    color: #ffffff !important;
  }

  /* Tab panes & slider track */
  .space-profile-tab-content {
    width: 100%;
    min-height: 280px;
    flex: 1;
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
  }

  .space-profile-tab-track {
    display: flex;
    width: 100%;
    align-items: flex-start;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }

  .space-profile-pane {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: block !important;
  }

  /* Media Grid Frame 2608500: 3 columns, 112x112px, gap 2px, radius 8px */
  .space-profile-media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    width: 100%;
    box-sizing: border-box;
  }

  .space-profile-media-item {
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background: #d9d9d9;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .space-profile-media-item:active {
    opacity: 0.85;
  }

  .space-profile-media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .space-profile-media-placeholder {
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: #d9d9d9;
  }

  .space-profile-empty-tab {
    padding: 40px 20px;
    text-align: center;
    color: #838099;
    font-size: 14px;
    grid-column: 1 / -1;
  }

  .space-profile-link-item,
  .space-profile-file-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #ffffff;
    border-radius: 12px;
    margin-bottom: 6px;
    text-decoration: none;
    color: #0b0a14;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  }

  .space-profile-link-icon,
  .space-profile-file-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(101, 127, 211, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #657fd3;
    flex-shrink: 0;
  }

  .space-profile-link-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Dark mode overrides */
  [data-theme="dark"] #space-profile-view {
    background: #12111a;
  }

  [data-theme="dark"] .space-profile-banner {
    border-color: rgba(255, 255, 255, 0.1);
    background: #191823;
  }

  [data-theme="dark"] .space-profile-tab {
    background: rgba(255, 255, 255, 0.08);
    color: #838099;
  }

  [data-theme="dark"] .space-profile-tab.active {
    background: #657fd3;
    color: #ffffff;
  }

  [data-theme="dark"] .space-profile-circle-btn {
    background: rgba(30, 29, 41, 0.8);
  }

  [data-theme="dark"] .space-profile-circle-btn svg path {
    stroke: #eef0e9;
  }

  [data-theme="dark"] .space-profile-media-item,
  [data-theme="dark"] .space-profile-media-placeholder {
    background: #232230;
  }

  [data-theme="dark"] .space-profile-link-item,
  [data-theme="dark"] .space-profile-file-item {
    background: #191823;
    color: #eef0e9;
  }

  [data-theme="dark"] #space-profile-menu-sheet {
    background: #191823;
    color: #ffffff;
  }

  [data-theme="dark"] #space-profile-menu-sheet .profile-menu-item {
    color: #ffffff;
  }

  [data-theme="dark"] #space-profile-menu-sheet .profile-menu-title {
    color: #ffffff;
  }

  [data-theme="dark"] #space-profile-menu-sheet .profile-menu-icon svg path,
  [data-theme="dark"] #space-profile-menu-sheet .profile-menu-icon svg circle {
    stroke: #838099;
  }

/* ==========================================================================
   Voice Messages (Recording UI, Lock Indicator & Player - Telegram Style)
   ========================================================================== */

/* Floating Lock Indicator (Swipe-up to lock: centered directly above send button) */
.voice-lock-pill {
  position: absolute;
  right: 14px;
  bottom: calc(100% + 10px);
  z-index: 120;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(11, 10, 20, 0.14), 0 2px 6px rgba(11, 10, 20, 0.06);
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #4a4858;
  pointer-events: none;
  animation: voiceLockFloat 1.2s ease-in-out infinite;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

[data-theme="dark"] .voice-lock-pill {
  background: #242432;
  color: #e2e0ed;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.voice-lock-pill.hidden {
  display: none !important;
}

.voice-lock-pill .voice-lock-chevron {
  animation: chevronBounce 0.9s infinite alternate ease-in-out;
}

@keyframes voiceLockFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes chevronBounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-3px); }
}

/* Composer Voice Recording Bar (Telegram style: seamless flex item inside capsule) */
.composer-voice-recording {
  flex: 1;
  min-width: 0;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 0 6px;
  box-sizing: border-box;
  background: transparent;
}

.composer-voice-recording.hidden {
  display: none !important;
}

/* While recording: hide input & attach btn, keep only voice bar and send button */
.composer.is-recording .attach-btn,
.composer.is-recording #message-input,
.composer.is-recording #discussion-attach-btn,
.composer.is-recording #discussion-input {
  display: none !important;
}

.composer.is-recording .composer-actions {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  margin: 0 !important;
  align-self: center !important;
  position: relative !important;
  z-index: 30 !important;
}

.chat-view .composer.is-recording .composer-expand-btn,
.composer.is-recording .composer-expand-btn,
.composer-expand-btn.hidden {
  display: none !important;
}

.composer.is-recording .composer-send-btn,
#discussion-view .composer.is-recording #discussion-send-btn {
  position: relative !important;
  z-index: 30 !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  background: #2850d1 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.voice-rec-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.voice-rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e53935;
  animation: recDotPulse 1s infinite alternate ease-in-out;
}

@keyframes recDotPulse {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.3; transform: scale(1.3); }
}

.voice-rec-timer {
  font-size: 14px;
  font-weight: 600;
  color: #e53935;
  font-variant-numeric: tabular-nums;
  min-width: 32px;
}

.voice-rec-wave {
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 24px;
  flex: 1;
  max-width: 130px;
  margin: 0 8px;
}

.voice-wave-bar {
  width: 2.5px;
  min-height: 3px;
  max-height: 22px;
  height: 4px;
  border-radius: 2px;
  background: #2850d1;
  transition: height 0.08s ease;
}

[data-theme="dark"] .voice-wave-bar {
  background: #657fd3;
}

.voice-rec-cancel-slide {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #838099;
  cursor: pointer;
  user-select: none;
  animation: cancelSlideHint 1.4s infinite ease-in-out;
}

@keyframes cancelSlideHint {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-6px); color: #4a4858; }
}

.voice-rec-locked-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.voice-rec-action-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.1s ease, background-color 0.15s ease;
}

.voice-rec-action-btn:active {
  transform: scale(0.92);
}

.voice-delete-btn {
  background: rgba(229, 57, 53, 0.1);
  color: #e53935;
}
.voice-delete-btn:hover {
  background: rgba(229, 57, 53, 0.18);
}

.voice-pause-btn {
  background: rgba(40, 80, 209, 0.1);
  color: #2850d1;
}
.voice-pause-btn:hover {
  background: rgba(40, 80, 209, 0.2);
}
[data-theme="dark"] .voice-pause-btn {
  background: rgba(101, 127, 211, 0.18);
  color: #657fd3;
}

.voice-send-btn {
  background: #2850d1;
  color: #ffffff;
}
.voice-send-btn:hover {
  background: #1e3fa8;
}
.voice-rec-locked-actions .voice-send-btn {
  display: none !important;
}

/* Feed Voice Message Player (Telegram & Area Design System) */
.post-card-voice .post-card-content {
  padding-bottom: 8px;
}

.voice-player {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 4px 2px;
  user-select: none;
  -webkit-user-select: none;
}

.post-card-voice .voice-player,
.original-post-banner .voice-player {
  width: 100%;
  max-width: 100%;
}

.voice-play-btn {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  border-radius: 50%;
  border: 0;
  background: #2850d1;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.15s ease;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(40, 80, 209, 0.25);
}

.voice-play-btn:hover {
  background: #1e3fa8;
}

.voice-play-btn:active {
  transform: scale(0.92);
}

.voice-play-btn svg {
  display: block;
}

.voice-player .voice-icon-pause {
  display: none !important;
}

.voice-player .voice-icon-play {
  display: block !important;
}

.voice-player.is-playing .voice-icon-play {
  display: none !important;
}

.voice-player.is-playing .voice-icon-pause {
  display: block !important;
}

.voice-player-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.voice-waveform-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 24px;
  cursor: pointer;
  position: relative;
  touch-action: none;
  width: 100%;
}

.voice-waveform-bar {
  flex: 1 1 0;
  min-width: 1.5px;
  border-radius: 2px;
  background: #dcdbf0;
  min-height: 3px;
  max-height: 22px;
  transition: background-color 0.08s ease, transform 0.08s ease;
  pointer-events: none;
}

[data-theme="dark"] .voice-waveform-bar {
  background: #353447;
}

.voice-waveform-bar.is-played {
  background: #2850d1 !important;
}

[data-theme="dark"] .voice-waveform-bar.is-played {
  background: #657fd3 !important;
}

.voice-waveform-bar.is-current {
  background: #2850d1 !important;
  transform: scaleY(1.18);
}

[data-theme="dark"] .voice-waveform-bar.is-current {
  background: #657fd3 !important;
  transform: scaleY(1.18);
}

.voice-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 11px;
  color: #838099;
}

.voice-meta-row .post-card-time,
.voice-meta-row .comment-card-time {
  float: none;
  margin: 0;
  line-height: 1;
}

.voice-time {
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #838099;
}

.voice-speed-btn {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(40, 80, 209, 0.08);
  color: #2850d1;
  border: 0;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  letter-spacing: 0.2px;
}

.voice-speed-btn:hover {
  background: rgba(40, 80, 209, 0.16);
}

.voice-speed-btn:active {
  transform: scale(0.92);
}

[data-theme="dark"] .voice-speed-btn {
  background: rgba(101, 127, 211, 0.18);
  color: #657fd3;
}

/* Inside comment bubbles */
.comment-card .voice-player {
  padding: 2px 0;
  max-width: 260px;
}
.comment-card-user .voice-play-btn {
  background: #ffffff;
  color: #2850d1;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.comment-card-user .voice-waveform-bar {
  background: rgba(255, 255, 255, 0.4);
}
.comment-card-user .voice-waveform-bar.is-played {
  background: #ffffff !important;
}
.comment-card-user .voice-time,
.comment-card-user .voice-speed-btn {
  color: rgba(255, 255, 255, 0.9);
}
.comment-card-user .voice-speed-btn {
  background: rgba(255, 255, 255, 0.2);
}

/* Clean & Smooth Message Appearance Animation */
@keyframes messageBubbleAppear {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.post-card.message-appear-anim,
.post-compact.message-appear-anim,
.comment-card.message-appear-anim {
  animation: messageBubbleAppear 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
  transform-origin: bottom center;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .post-card.message-appear-anim,
  .post-compact.message-appear-anim,
  .comment-card.message-appear-anim {
    animation: none !important;
  }
}