/* =========================================================
   style.css — стили веб-приложения «Заметки»
   ========================================================= */

/* ========= CSS-ПЕРЕМЕННЫЕ (тема) ========= */
:root {
  --bg:           #0e0f11;
  --surface:      #16181c;
  --surface2:     #1e2026;
  --surface3:     #262a32;
  --border:       rgba(255, 255, 255, 0.08);
  --border2:      rgba(255, 255, 255, 0.14);
  --text:         #f0f0f2;
  --text2:        #9499a5;
  --text3:        #5a5f6b;
  --accent:       #7c6af7;
  --accent2:      #5b4de0;
  --accent-glow:  rgba(124, 106, 247, 0.18);
  --green:        #3ecf8e;
  --green-bg:     rgba(62, 207, 142, 0.12);
  --amber:        #f5a623;
  --amber-bg:     rgba(245, 166, 35, 0.12);
  --red:          #f16565;
  --red-bg:       rgba(241, 101, 101, 0.12);
  --pin:          #f5c842;
  --font-head:    'Unbounded', sans-serif;
  --font-body:    'Golos Text', sans-serif;
  --radius:       12px;
  --radius-sm:    8px;
  --sidebar:      260px;
  --trans:        0.18s ease;
}

/* ========= СБРОС И БАЗОВЫЕ СТИЛИ ========= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background:   var(--bg);
  color:        var(--text);
  font-family:  var(--font-body);
  font-size:    15px;
  height:       100dvh;
  overflow:     hidden;
  display:      flex;
}

#app {
  display:    flex;
  flex:       1;
  min-width:  0;
  overflow:   hidden;
  height:     100dvh;
}

/* Анимация скрытия сайдбара на десктопе */
#sidebar {
  transition: width 0.25s ease, min-width 0.25s ease;
}

#app.sidebar-hidden #sidebar {
  width:     0 !important;
  min-width: 0 !important;
  overflow:  hidden;
  border-right: none;
}

/* ========= ЭКРАН АВТОРИЗАЦИИ ========= */
#auth-screen {
  position:        fixed;
  inset:           0;
  background:      var(--bg);
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         100;
  animation:       fadeIn 0.4s ease;
}

#auth-screen.hidden {
  display: none;
}

.auth-box {
  background:    var(--surface);
  border:        1px solid var(--border2);
  border-radius: 20px;
  padding:       40px;
  width:         100%;
  max-width:     400px;
  animation:     slideUp 0.4s ease;
}

.auth-logo {
  font-family:    var(--font-head);
  font-size:      22px;
  color:          var(--accent);
  letter-spacing: -0.5px;
  margin-bottom:  6px;
}

.auth-sub {
  color:         var(--text2);
  font-size:     13px;
  margin-bottom: 32px;
}

.auth-tabs {
  display:       flex;
  gap:           4px;
  background:    var(--surface2);
  border-radius: var(--radius-sm);
  padding:       4px;
  margin-bottom: 24px;
}

.auth-tab {
  flex:          1;
  padding:       8px;
  border:        none;
  background:    none;
  color:         var(--text2);
  font-size:     13px;
  font-family:   var(--font-body);
  font-weight:   500;
  border-radius: 6px;
  cursor:        pointer;
  transition:    var(--trans);
}

.auth-tab.active {
  background: var(--surface3);
  color:      var(--text);
}

.auth-field {
  margin-bottom: 14px;
}

.auth-field label {
  display:        block;
  font-size:      12px;
  color:          var(--text2);
  margin-bottom:  6px;
  letter-spacing: 0.3px;
}

.auth-field input {
  width:          100%;
  padding:        11px 14px;
  background:     var(--surface2);
  border:         1px solid var(--border2);
  border-radius:  var(--radius-sm);
  color:          var(--text);
  font-family:    var(--font-body);
  font-size:      14px;
  outline:        none;
  transition:     border-color var(--trans);
}

.auth-field input:focus {
  border-color: var(--accent);
}

.auth-btn {
  width:          100%;
  padding:        13px;
  background:     var(--accent);
  border:         none;
  border-radius:  var(--radius-sm);
  color:          #fff;
  font-family:    var(--font-head);
  font-size:      13px;
  cursor:         pointer;
  margin-top:     8px;
  transition:     background var(--trans), transform var(--trans);
}

.auth-btn:hover  { background: var(--accent2); }
.auth-btn:active { transform: scale(0.98); }

.auth-msg {
  font-size:  12px;
  margin-top: 10px;
  text-align: center;
}

.auth-msg.err { color: var(--red); }
.auth-msg.ok  { color: var(--green); }

.auth-forgot {
  display:    block;
  text-align: right;
  font-size:  12px;
  color:      var(--accent);
  margin-top: 6px;
  cursor:     pointer;
}

/* ========= САЙДБАР ========= */
#sidebar {
  width:        var(--sidebar);
  min-width:    var(--sidebar);
  height:       100dvh;
  background:   var(--surface);
  border-right: 1px solid var(--border);
  display:      flex;
  flex-direction: column;
  padding:      0;
  transition:   transform var(--trans);
  z-index:      10;
}

.sidebar-header {
  padding:       20px 18px 16px;
  border-bottom: 1px solid var(--border);
}

.logo {
  font-family:    var(--font-head);
  font-size:      18px;
  color:          var(--accent);
  letter-spacing: -0.3px;
}

.user-badge {
  display:       flex;
  align-items:   center;
  gap:           10px;
  margin-top:    16px;
  padding:       10px 12px;
  background:    var(--surface2);
  border-radius: var(--radius-sm);
  cursor:        pointer;
  transition:    background var(--trans);
}

.user-badge:hover { background: var(--surface3); }

.user-avatar {
  width:           30px;
  height:          30px;
  border-radius:   50%;
  background:      var(--accent-glow);
  border:          1px solid var(--accent);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       12px;
  font-weight:     600;
  color:           var(--accent);
  flex-shrink:     0;
}

.user-email {
  font-size:     12px;
  color:         var(--text2);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  flex:          1;
}

.sidebar-nav {
  flex:       1;
  overflow-y: auto;
  padding:    12px 10px;
}

.nav-section {
  margin-bottom: 20px;
}

.nav-section-label {
  font-size:      10px;
  color:          var(--text3);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding:        0 8px;
  margin-bottom:  6px;
}

.nav-item {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       9px 10px;
  border-radius: var(--radius-sm);
  cursor:        pointer;
  transition:    background var(--trans), color var(--trans);
  font-size:     13px;
  color:         var(--text2);
  position:      relative;
}

.nav-item:hover  { background: var(--surface2); color: var(--text); }
.nav-item.active { background: var(--accent-glow); color: var(--accent); }
.nav-item .icon  { font-size: 15px; width: 18px; text-align: center; }

.nav-badge {
  margin-left:   auto;
  background:    var(--surface3);
  color:         var(--text3);
  font-size:     10px;
  padding:       2px 6px;
  border-radius: 10px;
  margin-right:  18px; /* space for delete button */
}

.nav-item.active .nav-badge {
  background: var(--accent-glow);
  color:      var(--accent);
}

/* Категории в сайдбаре */
.cat-item-wrap {
  position: relative;
}

.cat-delete {
  position:      absolute;
  right:         -2px;
  top:           50%;
  transform:     translateY(-50%);
  background:    var(--surface);
  border:        none;
  color:         var(--text3);
  cursor:        pointer;
  font-size:     11px;
  padding:       2px 5px;
  opacity:       0;
  transition:    opacity var(--trans), color var(--trans);
  border-radius: 4px;
  z-index:       2;
}

.cat-item-wrap:hover .cat-delete { opacity: 1; }
.cat-delete:hover                 { color: var(--red); }

.add-cat {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       8px 10px;
  border-radius: var(--radius-sm);
  cursor:        pointer;
  font-size:     12px;
  color:         var(--text3);
  transition:    color var(--trans), background var(--trans);
}

.add-cat:hover {
  color:      var(--accent);
  background: var(--accent-glow);
}

.sidebar-footer {
  padding:    14px 10px;
  border-top: 1px solid var(--border);
}

.logout-btn {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       9px 10px;
  border-radius: var(--radius-sm);
  cursor:        pointer;
  font-size:     13px;
  color:         var(--text3);
  transition:    color var(--trans), background var(--trans);
  width:         100%;
  border:        none;
  background:    none;
  font-family:   var(--font-body);
}

.logout-btn:hover {
  color:      var(--red);
  background: var(--red-bg);
}

/* ========= ОСНОВНАЯ ОБЛАСТЬ ========= */
#main {
  flex:           1;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
}

#topbar {
  height:        58px;
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       0 20px;
  border-bottom: 1px solid var(--border);
  background:    var(--surface);
}

.menu-btn {
  display:    none;
  background: none;
  border:     none;
  color:      var(--text2);
  font-size:  20px;
  cursor:     pointer;
  padding:    4px;
}

.topbar-title {
  font-family: var(--font-head);
  font-size:   15px;
  color:       var(--text);
  flex:        1;
}

.search-wrap {
  flex:          1;
  max-width:     320px;
  display:       flex;
  align-items:   center;
  gap:           8px;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       0 12px;
}

.search-wrap:focus-within { border-color: var(--accent); }

.search-icon  { color: var(--text3); font-size: 14px; }

#search-input {
  flex:        1;
  background:  none;
  border:      none;
  color:       var(--text);
  font-size:   13px;
  font-family: var(--font-body);
  padding:     9px 0;
  outline:     none;
}

#search-input::placeholder { color: var(--text3); }

.clear-search {
  background: none;
  border:     none;
  color:      var(--text3);
  cursor:     pointer;
  font-size:  12px;
}

.sort-select {
  background:    var(--surface2);
  border:        1px solid var(--border);
  color:         var(--text2);
  font-size:     12px;
  padding:       8px 10px;
  border-radius: var(--radius-sm);
  font-family:   var(--font-body);
  outline:       none;
  cursor:        pointer;
}

.new-btn {
  display:       flex;
  align-items:   center;
  gap:           6px;
  background:    var(--accent);
  border:        none;
  color:         #fff;
  font-family:   var(--font-head);
  font-size:     12px;
  padding:       9px 16px;
  border-radius: var(--radius-sm);
  cursor:        pointer;
  transition:    background var(--trans), transform var(--trans);
  white-space:   nowrap;
}

.new-btn:hover  { background: var(--accent2); }
.new-btn:active { transform: scale(0.97); }

/* ========= КОНТЕНТ-ОБЛАСТЬ ========= */
#content {
  flex:     1;
  display:  flex;
  overflow: hidden;
}

/* ========= ПАНЕЛЬ СПИСКА ЗАМЕТОК ========= */
#notes-panel {
  width:          300px;
  min-width:      300px;
  border-right:   1px solid var(--border);
  display:        flex;
  flex-direction: column;
  background:     var(--surface);
  overflow:       hidden;
}

.filter-bar {
  padding:     10px 12px;
  border-bottom: 1px solid var(--border);
  display:     flex;
  flex-wrap:   wrap;
  gap:         6px;
}

.tag-chip {
  padding:       4px 10px;
  border-radius: 20px;
  font-size:     11px;
  cursor:        pointer;
  background:    var(--surface2);
  color:         var(--text2);
  border:        1px solid var(--border);
  transition:    var(--trans);
  white-space:   nowrap;
}

.tag-chip:hover  { border-color: var(--accent); color: var(--accent); }
.tag-chip.active { background: var(--accent-glow); border-color: var(--accent); color: var(--accent); }

.notes-list {
  flex:       1;
  overflow-y: auto;
  padding:    8px;
}

/* Карточка заметки */
.note-card {
  padding:       13px 14px;
  border-radius: var(--radius-sm);
  cursor:        pointer;
  margin-bottom: 4px;
  border:        1px solid transparent;
  transition:    background var(--trans), border-color var(--trans);
  position:      relative;
}

.note-card:hover  { background: var(--surface2); }
.note-card.active { background: var(--accent-glow); border-color: rgba(124, 106, 247, 0.3); }

.note-card-header {
  display:     flex;
  align-items: flex-start;
  gap:         6px;
}

.pin-icon {
  color:       var(--pin);
  font-size:   12px;
  flex-shrink: 0;
  margin-top:  1px;
}

.note-title {
  font-weight:   600;
  font-size:     13px;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  flex:          1;
  color:         var(--text);
}

.note-preview {
  font-size:              12px;
  color:                  var(--text2);
  margin-top:             5px;
  line-height:            1.5;
  display:                -webkit-box;
  -webkit-line-clamp:     2;
  -webkit-box-orient:     vertical;
  overflow:               hidden;
}

.note-meta {
  display:     flex;
  align-items: center;
  gap:         6px;
  margin-top:  8px;
  flex-wrap:   wrap;
}

.note-date {
  font-size: 10px;
  color:     var(--text3);
}

.note-tag {
  font-size:     10px;
  padding:       2px 7px;
  border-radius: 10px;
  background:    var(--surface3);
  color:         var(--text3);
}

.note-card.active .note-tag {
  background: rgba(124, 106, 247, 0.15);
  color:      var(--accent);
}

.archived-badge {
  font-size:     10px;
  padding:       2px 7px;
  border-radius: 10px;
  background:    var(--amber-bg);
  color:         var(--amber);
}

/* Пустое состояние */
.empty-state {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  color:           var(--text3);
  padding:         40px;
  text-align:      center;
}

.empty-icon { font-size: 40px; opacity: 0.4; }
.empty-text { font-size: 13px; line-height: 1.6; }

/* ========= ПАНЕЛЬ РЕДАКТОРА ========= */
#editor-panel {
  flex:           1;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  background:     var(--bg);
}

#editor-panel.empty-editor {
  align-items:     center;
  justify-content: center;
}

.editor-topbar {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       12px 20px;
  border-bottom: 1px solid var(--border);
  background:    var(--surface);
}

#note-title-input {
  flex:        1;
  background:  none;
  border:      none;
  font-family: var(--font-head);
  font-size:   16px;
  color:       var(--text);
  outline:     none;
  padding:     4px 0;
}

#note-title-input::placeholder { color: var(--text3); }

.editor-actions {
  display: flex;
  gap:     6px;
}

.icon-btn {
  background:    none;
  border:        1px solid var(--border);
  color:         var(--text2);
  padding:       7px 10px;
  border-radius: var(--radius-sm);
  cursor:        pointer;
  transition:    var(--trans);
  display:       flex;
  align-items:   center;
  gap:           5px;
  font-family:   var(--font-body);
  font-size:     12px;
}

.icon-btn:hover        { background: var(--surface2); border-color: var(--border2); color: var(--text); }
.icon-btn.danger:hover { background: var(--red-bg); border-color: var(--red); color: var(--red); }
.icon-btn.pinned       { color: var(--pin); border-color: rgba(245, 200, 66, 0.3); background: rgba(245, 200, 66, 0.08); }
.icon-btn.archived     { color: var(--amber); border-color: rgba(245, 166, 35, 0.3); background: var(--amber-bg); }

.save-btn {
  background:    var(--accent);
  border:        none;
  color:         #fff;
  font-family:   var(--font-head);
  font-size:     12px;
  padding:       8px 16px;
  border-radius: var(--radius-sm);
  cursor:        pointer;
  transition:    var(--trans);
}

.save-btn:hover { background: var(--accent2); }

.editor-meta {
  display:       flex;
  align-items:   center;
  gap:           10px;
  flex-wrap:     wrap;
  padding:       10px 20px;
  border-bottom: 1px solid var(--border);
  background:    var(--surface);
}

.meta-label {
  font-size: 11px;
  color:     var(--text3);
}

.cat-select {
  background:    var(--surface2);
  border:        1px solid var(--border);
  color:         var(--text2);
  font-size:     12px;
  padding:       5px 9px;
  border-radius: var(--radius-sm);
  font-family:   var(--font-body);
  outline:       none;
  cursor:        pointer;
}

.editor-tags {
  display:  flex;
  gap:      5px;
  flex-wrap: wrap;
}

.editor-tag {
  display:       flex;
  align-items:   center;
  gap:           4px;
  padding:       3px 8px;
  border-radius: 10px;
  background:    var(--accent-glow);
  color:         var(--accent);
  font-size:     11px;
}

.remove-tag {
  background:  none;
  border:      none;
  color:       var(--accent);
  cursor:      pointer;
  font-size:   12px;
  padding:     0;
  line-height: 1;
}

.add-tag-input {
  background:    none;
  border:        none;
  border-bottom: 1px solid var(--border2);
  color:         var(--text);
  font-size:     12px;
  padding:       3px 6px;
  font-family:   var(--font-body);
  outline:       none;
  width:         100px;
}

.add-tag-input::placeholder { color: var(--text3); }

#note-content {
  flex:        1;
  background:  none;
  border:      none;
  color:       var(--text);
  font-family: var(--font-body);
  font-size:   15px;
  line-height: 1.8;
  padding:     24px 20px;
  resize:      none;
  outline:     none;
}

#note-content::placeholder { color: var(--text3); }

.editor-footer {
  padding:     10px 20px;
  border-top:  1px solid var(--border);
  display:     flex;
  align-items: center;
  gap:         12px;
  font-size:   11px;
  color:       var(--text3);
  background:  var(--surface);
}

.export-btn {
  margin-left: auto;
  display:     flex;
  gap:         6px;
}

.exp-btn {
  background:    none;
  border:        1px solid var(--border);
  color:         var(--text3);
  font-size:     11px;
  padding:       5px 10px;
  border-radius: var(--radius-sm);
  cursor:        pointer;
  font-family:   var(--font-body);
  transition:    var(--trans);
}

.exp-btn:hover {
  color:      var(--text);
  border-color: var(--border2);
  background: var(--surface2);
}

.welcome-msg { text-align: center; }

.welcome-msg h2 {
  font-family:   var(--font-head);
  font-size:     22px;
  color:         var(--accent);
  margin-bottom: 10px;
}

.welcome-msg p {
  color:     var(--text2);
  font-size: 14px;
}

/* ========= МОДАЛЬНОЕ ОКНО ПРОФИЛЯ ========= */
.overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, 0.6);
  z-index:         200;
  display:         flex;
  align-items:     center;
  justify-content: center;
  animation:       fadeIn 0.2s ease;
}

.overlay.hidden { display: none; }

.modal {
  background:    var(--surface);
  border:        1px solid var(--border2);
  border-radius: 16px;
  padding:       28px;
  width:         100%;
  max-width:     360px;
  animation:     slideUp 0.25s ease;
}

.modal h3 {
  font-family:   var(--font-head);
  font-size:     15px;
  margin-bottom: 20px;
}

.profile-row {
  display:       flex;
  align-items:   center;
  gap:           12px;
  margin-bottom: 20px;
}

.profile-avatar {
  width:           52px;
  height:          52px;
  border-radius:   50%;
  background:      var(--accent-glow);
  border:          2px solid var(--accent);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       18px;
  font-weight:     600;
  color:           var(--accent);
}

.profile-info p    { font-size: 14px; font-weight: 500; }
.profile-info span { font-size: 12px; color: var(--text2); }

.modal-stat {
  display:         flex;
  justify-content: space-between;
  padding:         10px 0;
  border-bottom:   1px solid var(--border);
  font-size:       13px;
  color:           var(--text2);
}

.modal-stat:last-of-type { border: none; }

.modal-close {
  width:         100%;
  margin-top:    20px;
  background:    var(--surface2);
  border:        1px solid var(--border);
  color:         var(--text2);
  font-family:   var(--font-body);
  font-size:     13px;
  padding:       10px;
  border-radius: var(--radius-sm);
  cursor:        pointer;
  transition:    var(--trans);
}

.modal-close:hover {
  background: var(--surface3);
  color:      var(--text);
}

/* ========= ВВОД КАТЕГОРИИ ========= */
.cat-input-row {
  display: flex;
  gap:     6px;
  padding: 6px 10px;
}

.cat-new-input {
  flex:          1;
  background:    var(--surface2);
  border:        1px solid var(--border);
  color:         var(--text);
  font-size:     12px;
  padding:       7px 10px;
  border-radius: var(--radius-sm);
  font-family:   var(--font-body);
  outline:       none;
}

.cat-new-input:focus { border-color: var(--accent); }

.cat-add-btn {
  background:    var(--accent);
  border:        none;
  color:         #fff;
  font-size:     14px;
  padding:       0 12px;
  border-radius: var(--radius-sm);
  cursor:        pointer;
  transition:    background var(--trans);
}

.cat-add-btn:hover { background: var(--accent2); }

/* ========= УВЕДОМЛЕНИЕ (TOAST) ========= */
#toast {
  position:      fixed;
  bottom:        24px;
  right:         24px;
  background:    var(--surface3);
  border:        1px solid var(--border2);
  color:         var(--text);
  font-size:     13px;
  padding:       12px 18px;
  border-radius: var(--radius-sm);
  z-index:       999;
  animation:     slideUp 0.25s ease;
  display:       none;
}

#toast.show    { display: block; }
#toast.success { border-left: 3px solid var(--green); }
#toast.error   { border-left: 3px solid var(--red); }

/* ========= СКРОЛЛБАР ========= */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 10px; }

/* ========= АНИМАЦИИ ========= */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ========= АДАПТИВНОСТЬ ========= */
@media (max-width: 800px) {
  :root {
    --sidebar: 280px;
  }

  #sidebar {
    position:  fixed;
    left:      0;
    top:       0;
    height:    100%;
    transform: translateX(-100%);
    z-index:   200;
  }

  #sidebar.open {
    transform:  translateX(0);
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.6);
  }

  /* Затемнение фона при открытом сайдбаре */
  #sidebar-overlay {
    display:    block;
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,0.5);
    z-index:    199;
    opacity:    0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  #sidebar-overlay.visible {
    opacity: 1;
    pointer-events: all;
  }

  .menu-btn    { display: block; }
  #notes-panel { width: 100%; }

  #editor-panel {
    position: fixed;
    inset:    0;
    z-index:  50;
    display:  none;
  }

  #editor-panel.mobile-open { display: flex; }

  .back-btn { display: flex !important; }

  /* Топбар мобильный */
  #topbar {
    padding:    8px 12px;
    gap:        8px;
    flex-wrap:  wrap;
  }

  .topbar-title { font-size: 13px; }

  .search-wrap {
    order:    5;
    width:    100%;
    min-width: 0;
    flex:     1 1 100%;
  }

  .sort-select { font-size: 11px; padding: 6px 8px; }

  .new-btn { font-size: 12px; padding: 7px 12px; }

  /* Редактор мобильный */
  .editor-topbar {
    padding:  10px 12px;
    gap:      8px;
    flex-wrap: wrap;
  }

  #note-title-input { font-size: 15px; }

  .editor-actions {
    gap:   5px;
    width: 100%;
    justify-content: flex-end;
  }

  .editor-meta {
    padding:    8px 12px;
    gap:        8px;
    flex-wrap:  wrap;
  }

  #note-content {
    padding:   16px 12px;
    font-size: 15px;
  }

  .editor-footer {
    padding:    8px 12px;
    flex-wrap:  wrap;
    gap:        8px;
  }

  .export-btn {
    margin-left: 0;
    width:       100%;
    justify-content: flex-end;
  }

  /* Медиа-галерея мобильная */
  .media-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .media-toolbar {
    flex-wrap: wrap;
    gap:       8px;
  }
}

@media (max-width: 480px) {
  .editor-actions .icon-btn span:not(.btn-emoji) { display: none; }
  .icon-btn { padding: 8px; }
  .save-btn  { padding: 8px 14px; font-size: 11px; }

  .media-gallery {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}

.back-btn { display: none; }

/* Скрываем overlay сайдбара на десктопе */
#sidebar-overlay { display: none; }

/* ========= МЕНТАЛЬНАЯ КАРТА ========= */
/* Контейнер карты должен занимать оставшееся место в flex-колонке редактора */
#mm-canvas-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* Кнопка переключения в режим карты — активное состояние */
#mm-toggle-btn.pinned {
  color: #7c6af7;
  border-color: rgba(124, 106, 247, 0.4);
  background: rgba(124, 106, 247, 0.12);
}

/* ========= МЕДИА-ВЛОЖЕНИЯ ========= */

.media-section {
  border-top:  1px solid var(--border);
  background:  var(--surface);
  padding:     12px 20px;
}

.media-toolbar {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-bottom: 10px;
}

.media-toolbar-label {
  font-size:   11px;
  color:       var(--text3);
  font-weight: 500;
  letter-spacing: 0.3px;
  flex:        1;
}

.media-upload-btn {
  display:       flex;
  align-items:   center;
  gap:           5px;
  background:    none;
  border:        1px solid var(--border2);
  color:         var(--text2);
  font-size:     11px;
  padding:       5px 10px;
  border-radius: var(--radius-sm);
  cursor:        pointer;
  font-family:   var(--font-body);
  transition:    var(--trans);
  white-space:   nowrap;
}

.media-upload-btn:hover {
  background:   var(--surface2);
  border-color: var(--accent);
  color:        var(--accent);
}

.media-gallery {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   8px;
}

.media-item {
  position:      relative;
  border-radius: var(--radius-sm);
  overflow:      hidden;
  background:    var(--surface2);
  border:        1px solid var(--border);
  aspect-ratio:  1;
  cursor:        pointer;
  transition:    var(--trans);
  group:         true;
}

.media-item:hover {
  border-color: var(--accent);
  transform:    scale(1.02);
}

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

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

.media-item-file {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  height:          100%;
  padding:         10px;
  gap:             6px;
  aspect-ratio:    unset;
  min-height:      80px;
}

.media-item-file .file-icon { font-size: 26px; }
.media-item-file .file-name {
  font-size:   10px;
  color:       var(--text2);
  text-align:  center;
  word-break:  break-all;
  line-height: 1.3;
  max-height:  36px;
  overflow:    hidden;
}
.media-item-file .file-size {
  font-size: 10px;
  color:     var(--text3);
}

.media-item-delete {
  position:      absolute;
  top:           4px;
  right:         4px;
  background:    rgba(0,0,0,0.7);
  border:        none;
  color:         #fff;
  font-size:     11px;
  width:         22px;
  height:        22px;
  border-radius: 50%;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  opacity:       0;
  transition:    opacity var(--trans);
  z-index:       5;
}

.media-item:hover .media-item-delete { opacity: 1; }

/* Лайтбокс */
#media-lightbox {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,0.92);
  z-index:         500;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  gap:             16px;
  padding:         20px;
  cursor:          zoom-out;
}

#media-lightbox.hidden { display: none; }

#media-lightbox img,
#media-lightbox video {
  max-width:     90vw;
  max-height:    80vh;
  border-radius: var(--radius);
  object-fit:    contain;
  cursor:        default;
}

#media-lightbox .lb-close {
  position:    fixed;
  top:         16px;
  right:       16px;
  background:  rgba(255,255,255,0.12);
  border:      none;
  color:       #fff;
  font-size:   20px;
  width:       40px;
  height:      40px;
  border-radius: 50%;
  cursor:      pointer;
  display:     flex;
  align-items: center;
  justify-content: center;
  transition:  background var(--trans);
}

#media-lightbox .lb-close:hover { background: rgba(255,255,255,0.25); }

#media-lightbox .lb-caption {
  font-size: 12px;
  color:     rgba(255,255,255,0.5);
  text-align: center;
}

/* Upload drag-over */
.editor-drop-zone {
  position:    absolute;
  inset:       0;
  background:  rgba(124, 106, 247, 0.12);
  border:      2px dashed var(--accent);
  border-radius: var(--radius);
  display:     flex;
  align-items: center;
  justify-content: center;
  font-size:   16px;
  color:       var(--accent);
  font-family: var(--font-head);
  z-index:     30;
  pointer-events: none;
  opacity:     0;
  transition:  opacity 0.2s ease;
}

#editor-panel.drag-over .editor-drop-zone { opacity: 1; }

/* Progress bar при загрузке файла */
.media-upload-progress {
  height:        3px;
  background:    var(--surface3);
  border-radius: 2px;
  margin-top:    8px;
  overflow:      hidden;
  display:       none;
}

.media-upload-progress.active { display: block; }

.media-upload-progress-bar {
  height:        100%;
  background:    var(--accent);
  border-radius: 2px;
  transition:    width 0.2s ease;
}

/* ========= МОБИЛЬНАЯ НИЖНЯЯ ПАНЕЛЬ ========= */
#mobile-bottombar {
  display:     none;
}

@media (max-width: 800px) {
  /* Отступ снизу чтобы контент не перекрывался */
  #notes-panel {
    padding-bottom: 72px;
  }

  #mobile-bottombar {
    display:         flex;
    position:        fixed;
    bottom:          0;
    left:            0;
    right:           0;
    height:          60px;
    background:      var(--surface);
    border-top:      1px solid var(--border);
    align-items:     center;
    justify-content: space-around;
    z-index:         100;
    padding:         0 8px;
    padding-bottom:  env(safe-area-inset-bottom, 0px);
  }

  .bottombar-btn {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             3px;
    background:      none;
    border:          none;
    color:           var(--text3);
    font-size:       10px;
    font-family:     var(--font-body);
    cursor:          pointer;
    padding:         8px 16px;
    border-radius:   var(--radius-sm);
    transition:      var(--trans);
    min-width:       60px;
  }

  .bottombar-btn:active {
    background: var(--surface2);
  }

  .bottombar-btn .bb-icon {
    font-size: 20px;
    line-height: 1;
  }

  .bottombar-btn.active { color: var(--accent); }

  /* Кнопка создания заметки — акцентная */
  #bb-new-note {
    background:    var(--accent);
    color:         #fff;
    border-radius: 50%;
    width:         48px;
    height:        48px;
    min-width:     48px;
    padding:       0;
    justify-content: center;
    font-size:     24px;
    box-shadow:    0 4px 16px var(--accent-glow);
  }

  #bb-new-note .bb-icon { font-size: 24px; }
  #bb-new-note span:last-child { display: none; }

  /* Скрываем кнопку new в топбаре на мобильном */
  .new-btn { display: none; }
}

/* Safe area для iPhone X+ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 800px) {
    #mobile-bottombar {
      height: calc(60px + env(safe-area-inset-bottom, 0px));
    }
  }
}

/* ========= СВОРАЧИВАНИЕ САЙДБАРА (ДЕСКТОП) ========= */

.sidebar-collapse-btn {
  display:       flex;
  align-items:   center;
  justify-content: center;
  background:    none;
  border:        none;
  color:         var(--text3);
  cursor:        pointer;
  font-size:     12px;
  padding:       4px 6px;
  border-radius: var(--radius-sm);
  transition:    var(--trans);
  margin-left:   auto;
  margin-right:  4px;
  opacity:       0.5;
}

.sidebar-collapse-btn:hover {
  opacity:    1;
  background: var(--surface2);
  color:      var(--accent);
}

/* Скрытый сайдбар на десктопе */
#app.sidebar-hidden #sidebar {
  width:     0;
  min-width: 0;
  overflow:  hidden;
  border-right: none;
}

.sidebar-expand-btn {
  display:       flex;
  align-items:   center;
  gap:           5px;
  background:    none;
  border:        1px solid var(--border2);
  color:         var(--text2);
  font-size:     11px;
  padding:       5px 10px;
  border-radius: var(--radius-sm);
  cursor:        pointer;
  font-family:   var(--font-body);
  transition:    var(--trans);
  white-space:   nowrap;
  flex-shrink:   0;
}

.sidebar-expand-btn:hover {
  background:   var(--surface2);
  border-color: var(--accent);
  color:        var(--accent);
}

.sidebar-expand-btn.hidden {
  display: none;
}

@media (max-width: 800px) {
  .sidebar-collapse-btn { display: none; }
  .sidebar-expand-btn   { display: none !important; }
}

/* ========= МЕНТАЛЬНАЯ КАРТА — ПОЛНОЕ ПРОСТРАНСТВО ========= */

/* Когда карта открыта, скрываем скролл редактора */
#editor-panel:has(#mm-wrap) {
  overflow: hidden;
}

#mm-wrap {
  flex: 1 1 0;
  min-height: 0;
}

#mm-stage {
  flex: 1 1 0;
  min-height: 0;
  touch-action: none; /* disable browser scroll during touch drag */
}

/* Мобильный: убрать лишний отступ тулбара карты */
@media (max-width: 600px) {
  #mm-bar {
    gap: 4px !important;
    padding: 6px 8px !important;
  }
  .mm-btn { font-size: 10px !important; padding: 5px 7px !important; }
}