@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}

/* Submit Button */
.create-chat-button{width:100%;height:50px;min-height:50px;margin:0;background:#838099;opacity:0.5;border:0;border-radius:29px;display:flex;align-items:center;justify-content:center;font-family:'Roboto','Inter',sans-serif;font-size:16px;font-weight:500;line-height:19px;color:#ffffff;cursor:not-allowed;pointer-events:none;transition:background-color .2s ease,opacity .2s ease,transform .1s ease;flex-shrink:0}
.create-chat-button.active{background:#2850d1;opacity:1;cursor:pointer;pointer-events:auto}
.create-chat-button.active:hover{background:#1e3fa8}
.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}

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;
}
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{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 .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}
.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: scale(0.98) !important;
  filter: none !important;
  -webkit-filter: none !important;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.25s 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:20px;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{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:20px;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-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.collapsing .composer-rich-editor:empty:before{content:attr(data-placeholder);color:#838099;pointer-events:none;display:block}
.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: 18px;
  font-weight: 600;
  line-height: 22px;
  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 buttons */
.composer-send-btn{width:36px;height:36px;min-width:36px;min-height:36px;border-radius:30px;border:0;background:#838099;color:rgba(255,255,255,0.8);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;flex-shrink:0;transition:background-color .15s ease,transform .1s ease}
.composer-send-btn.active{background:#2850d1;color:#f4f3f8}
.composer-send-btn.active:hover{background:#1e3fa8}
.composer-send-btn:active{transform:scale(0.95)}
.composer-send-btn svg{display:block;width:36px;height:36px}

.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}
.attachment-preview-container.hidden{display:none}
.attachment-chip{position:relative;display:inline-flex;align-items:center;background:#ffffff;padding:4px;border-radius:12px;box-shadow:0 4px 12px rgba(11,10,20,0.1)}
.attachment-chip img{width:56px;height:56px;object-fit:cover;border-radius:8px;display:block}
.attachment-chip button{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}
[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{background:#302e42}
@media(min-width:721px){
  :root{
    --background: #f4f3f8;
  }
  body{
    background: #f4f3f8;
    margin: 0;
    padding: 0;
  }
  .app-shell{
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 100vh;
    background: #f4f3f8;
    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: 20px;
    margin: 0;
    box-sizing: border-box;
    background: #ffffff;
    border: none;
    border-radius: inherit;
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: 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 0;
    margin: 0;
    box-sizing: border-box;
    justify-content: flex-start;
    gap: 4px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .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;
  }

  /* Кнопка создания пространства (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;
  }

  /* Пустое состояние (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;
    margin: 0;
    border: 0;
    background: transparent;
    text-align: center;
  }
  #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;
  }
  #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;
  }

  /* Маршруты 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{
    background: #12121a;
    border: none;
  }

  body[data-route="chat"] .chat-panel-slot,
  body[data-route="discussion"] .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,
  #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)) 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;
    box-sizing: border-box;
    display: block;
  }

  #chat-view .post-card-img,
  #discussion-view .post-card-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 .post-card-img,
  #discussion-view .post-card-image-wrap .post-card-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: 20px;
    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: #838099;
    color: rgba(255, 255, 255, 0.8);
    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.active,
  #discussion-view .composer-send-btn.active{
    background: #2850d1;
    color: #f4f3f8;
  }
  #chat-view .composer-send-btn.active:hover,
  #discussion-view .composer-send-btn.active:hover{
    background: #1e3fa8;
  }
  #chat-view .composer-send-btn:active,
  #discussion-view .composer-send-btn:active{
    transform: scale(0.95);
  }
  #chat-view .composer-send-btn svg,
  #discussion-view .composer-send-btn svg{
    display: block;
    width: 36px;
    height: 36px;
  }

  /* Настройки на десктопе — внутри контейнера .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: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
    background: #ffffff;
  }
  .side-panel-slot #settings-view .settings-auth-row {
    margin-top: auto;
    padding-top: 24px;
    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.1);
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
  }
  .side-panel-slot #settings-view .settings-back-btn{
    background: rgba(255, 255, 255, 0.8);
  }
  .side-panel-slot #settings-view .settings-card,
  .side-panel-slot #settings-view .theme-btn{
    background: #f4f3f8;
  }
  .side-panel-slot #settings-view .theme-btn.active{
    background: #f4f3f8;
    border: 0;
  }
  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}
  .modal-backdrop:has(.create-space-screen),
  #modal-backdrop{
    padding: 16px !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.70) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }
  .modal-backdrop:has(.create-space-screen) .create-space-screen,
  #modal-backdrop .create-space-screen{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 360px !important;
    height: auto !important;
    max-height: calc(100svh - 32px) !important;
    min-height: 0 !important;
    border-radius: 22px !important;
    box-shadow: 0 16px 36px rgba(11, 10, 20, 0.2) !important;
    background: #ffffff !important;
  }
  [data-theme="dark"] .modal-backdrop:has(.create-space-screen) .create-space-screen,
  [data-theme="dark"] #modal-backdrop .create-space-screen{
    background: #191823 !important;
  }
  .modal-backdrop:has(.create-space-screen) .create-screen-header{
    position: relative !important;
    top: auto !important;
  }
  .modal-backdrop:has(.create-space-screen) .create-space-form{
    min-height: 0 !important;
    max-height: calc(100svh - 32px - 57px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
    gap: 16px !important;
    padding: 20px 10px !important;
    scrollbar-width: none !important;
  }
  .modal-backdrop:has(.create-space-screen) .create-space-form::-webkit-scrollbar{
    display: none !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:64px;padding:0;background:var(--background);border-bottom:1px solid rgba(64,64,64,.1)}
  .sidebar-top{display:flex;align-items:center;width:100%;height:64px;min-height:64px;margin:0;padding:16px 20px;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}
  #home-view{display:block;max-width:none;min-height:calc(100svh - 64px);padding:0}
  body[data-route="home"] .view-heading{display:none}
  .spaces-grid{display:flex;flex-direction:column;gap:4px;min-height:calc(100svh - 64px);padding:0 20px 28px;box-sizing:border-box}
  .spaces-grid.is-empty,.spaces-grid:has(.empty-state){padding:0 20px;min-height:calc(100svh - 64px);display:flex;flex-direction:column;align-items:center;justify-content:center}
  .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;flex:1;width:100%;min-height:0;padding:0;margin: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;line-height:19px;margin:0}
  .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-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}
  .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}
  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"] {
    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 {
    display: flex !important;
    flex-direction: column;
  }

  .chat-panel-slot #chat-view,
  .chat-panel-slot #discussion-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-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{
    display: none !important;
  }
  body[data-route="home"] #home-view{
    position: static;
    width: 100%;
    height: auto;
    min-height: calc(100svh - 64px);
    padding: 0;
  }
  #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: #20231f;
  }
}

/* Анимация перехода на страницу настроек (справа налево, не выходя из контейнера) */
@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: 242px;
  max-width: calc(100% - 90px);
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 10;
}

.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.08);
  clip-path: inset(0 0 0 100% round 9999px);
  opacity: 0;
  pointer-events: none;
  transition: clip-path 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.2s ease,
              transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translate3d(12px, 0, 0);
}

.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: '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;
}

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

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

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

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

.settings-header {
  height: 65px;
  min-height: 65px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(64, 64, 64, 0.1);
  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.8);
  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: #f4f3f8;
}

.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;
}

.settings-profile-banner {
  width: 100%;
  height: 206px;
  min-height: 206px;
  position: relative;
  background-image: url('./profile_banner.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
}

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

.settings-profile-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(102, 102, 102, 0) 0%, rgba(29, 29, 29, 0.71) 77%, #000000 98%);
  pointer-events: none;
}

.settings-profile-name-wrap {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 2;
  cursor: pointer;
}

.settings-profile-name {
  font-family: 'Inter', sans-serif;
  font-size: 26px;
  font-weight: 500;
  color: #f4f3f8;
  line-height: 30px;
  display: block;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.settings-profile-edit-btn {
  position: absolute;
  top: 14px;
  right: 13px;
  width: 44px;
  height: 44px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  border: 0;
  transition: background 0.15s ease, transform 0.1s ease;
}

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

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

.settings-list {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  background: #ffffff;
  box-sizing: border-box;
}

.settings-card {
  background: #f4f3f8;
  border-radius: 12px;
  border: 0;
  box-sizing: border-box;
  width: 100%;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

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

.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: 600;
  color: #2850d1;
  line-height: 17px;
}

.settings-card-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #838099;
  opacity: 0.6;
  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: 4px;
}

.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: 30px;
  height: 30px;
  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: #f4f3f8;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 0;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.15s ease, transform 0.1s ease;
}

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

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

.theme-btn.active {
  background: #f4f3f8;
  border: 0;
}

.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;
}

.settings-delete-row {
  margin-top: auto;
  padding-top: 40px;
  padding-bottom: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.settings-delete-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-delete-btn:hover {
  background: rgba(224, 87, 87, 0.08);
}

.settings-delete-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,
html[data-theme="dark"] .settings-header,
html[data-theme="dark"] .settings-list {
  background: #1a1a24 !important;
}

html[data-theme="dark"] .settings-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

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,
html[data-theme="dark"] .settings-profile-edit-btn {
  background: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .settings-back-btn:hover,
html[data-theme="dark"] .settings-profile-edit-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

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

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

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

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

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

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

html[data-theme="dark"] .settings-card-icon,
html[data-theme="dark"] .settings-chevron,
html[data-theme="dark"] .theme-btn-icon {
  color: #c5c4d4;
}

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;
}

html[data-theme="dark"] .theme-btn.active {
  background: #242432;
  border: 0;
}

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

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

/* Окно настройки профиля (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="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="chat"] .main-area,
  body[data-route="discussion"] .main-area,
  #chat-view,
  #discussion-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,
  #discussion-view .message-list,
  .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: calc(58px + max(12px, env(safe-area-inset-bottom, 12px)) + 16px) !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: 20px !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 */
  .chat-view .composer:not(.expanded):not(.collapsing) .composer-expand-btn {
    display: flex !important;
  }
  .chat-view .composer.expanded .composer-expand-btn,
  .chat-view .composer.collapsing .composer-expand-btn {
    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-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(11, 10, 20, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  opacity: 1;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.lightbox-backdrop.hidden {
  display: none !important;
  opacity: 0;
  pointer-events: none;
}
.lightbox-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}
.lightbox-img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  animation: lightboxZoomIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  cursor: default;
}
@keyframes lightboxZoomIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  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.28);
  transform: scale(1.06);
}
.lightbox-close:active {
  transform: scale(0.94);
}
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: scale(0.98) !important;
  filter: none !important;
  -webkit-filter: none !important;
  pointer-events: none !important;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.25s 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;
}