:root{
  --bg: #f5f5f7;
  --sidebar: #f0f0f4;
  --separator: #d9d9df;
  --text: #111113;
  --muted: #6b6b6f;
  --accent: #007aff;
  --note-bg: #ffffff;
}
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}
#app{ display: grid; grid-template-columns: 260px 340px 1fr; height: 100vh; }
.sidebar{
  border-right: 1px solid var(--separator);
  background: var(--sidebar);
  display: flex;
  flex-direction: column;
}
.sidebar-header{ display: flex; align-items: center; justify-content: space-between; padding: 12px; }
.app-title{ font-weight: 700; }
.icon {
  width: 24px;
  height: 24px;
  color: #FFB800;
  cursor: pointer;
  stroke-width: 1.5px;
}
.icon-btn{ border: 1px solid var(--separator); background: #fff; border-radius: 8px; padding: 6px 8px; cursor: pointer; }
.sidebar-search{ 
  display: flex;
  align-items: center;
  margin: 10px;
  background-color: hsl(240,10.6%,90.8%);
  border: 0;
  padding: 0;
  appearance: none;
  outline: none;
  font: inherit;
  border-radius: 10px;
}
.sidebar-search input{ 
  width: 100%; 
  padding: 8px 10px;
  border-radius: 10px; 
  border: 1px solid var(--separator); 
  background: transparent; 
}

.nav-bar-group.right{
  display: flex;
  gap: 10px;
  align-items: center;
}

.hover{
  padding: 3px;
  border-radius: 5px;
  border: none;
  background-color: transparent;
}

.hover:hover{
  background-color: hsl(240,10.6%,90.8%);
}

.sidebar-search input:focus{
  outline: 2px solid rgb(84, 146, 234);
}
.folders{ padding: 6px; overflow: auto; }
.folder{ padding: 8px 10px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.folder.active{ background: rgba(0,0,0,0.06); }
.folder .name{ flex: 1; }
.folder .status{ font-size: 12px; font-weight: bold; }
.folder .status.accessible{ color: #28a745; }
.folder .status.inaccessible{ color: #dc3545; }

.bot-status{ 
  padding: 8px 10px; 
  margin-bottom: 8px; 
  border-radius: 8px; 
  background: rgba(0,0,0,0.02); 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  font-size: 12px; 
}
.status-indicator{ 
  width: 8px; 
  height: 8px; 
  border-radius: 50%; 
}
.status-indicator.connected{ background: #28a745; }
.status-indicator.disconnected{ background: #dc3545; }
.bot-info{ color: var(--muted); }

.error{ 
  padding: 8px 10px; 
  color: #dc3545; 
  background: rgba(220, 53, 69, 0.1); 
  border-radius: 8px; 
  margin: 8px; 
  font-size: 12px; 
}

.info{ 
  padding: 8px 10px; 
  color: #51dc35; 
  background: rgba(220, 53, 69, 0.1); 
  border-radius: 8px; 
  margin: 8px; 
  font-size: 12px; 
}

.notes-list{ border-right: 1px solid var(--separator); background: var(--note-bg); display: flex; flex-direction: column; }
.notes-list-header{ 
  width: 100%;
  height: 52px;
}
.section-title{ font-weight: 600; }
.header-buttons{ display: flex; align-items: center; gap: 8px; }
.primary-btn{ background: var(--accent)!important; color: #fff; border: none; border-radius: 8px; padding: 8px 12px; cursor: pointer; }
.trash-btn{ background: #dc3545; color: #fff; border: none; border-radius: 8px; padding: 8px 12px; cursor: pointer; font-size: 14px; }
.trash-btn:hover{ background: #c82333; }

.notes{ 
  list-style: none; 
  margin: 0;
  padding: 0; 
  overflow: auto; 
  position: relative;
}

.context-menu {
  position: fixed;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  padding: 5px;
  min-width: 130px;
  max-width: calc(100vw - 20px);
  z-index: 1000;
  display: none;
}

.context-menu.show {
  display: block;
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 4px;
  padding-right: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  font-size: 14px;
}

.context-menu-item:hover {
  background: rgba(183, 183, 186, 0.16);
}

.context-menu-item.delete, 
.context-menu-item.delete .icon {
  color: #ff3b30;
}

.context-menu-item.delete .icon {
  width: 21px;
  height: 21px;
}

.context-menu-item.delete .trash {
  display: flex;
  align-items: center;
}

.note-item{ 
  padding: 12px;
  margin: 0 10px; 
  border-radius: 10px;
  cursor: pointer; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
}
.note-item:hover{ 
  background: rgba(183, 183, 186, 0.16)
}
.note-item.active{ 
  background: rgba(120,120,128,0.16)
 }
.note-content-wrapper{ flex: 1; min-width: 0; }
.note-item .title{ 
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}
.note-item .snippet{ color: var(--muted); font-size: 12px; margin-top: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.note-trash-btn{ background: #dc3545; color: #fff; border: none; border-radius: 6px; padding: 6px 8px; cursor: pointer; font-size: 12px; opacity: 0; transition: opacity 0.2s; }
.note-item:hover .note-trash-btn{ opacity: 1; }
.note-trash-btn:hover{ background: #c82333; }

.editor{ display: flex; flex-direction: column; background: var(--note-bg); }
.editor-toolbar{ 
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  gap: 8px; 
  width: 100%;
  height: 52px;
  padding: 0 10px;

  background: white;
  border-radius: 8px;
}
.note-title{ flex: 1; font-size: 18px; padding: 8px 10px; border: 1px solid var(--separator); border-radius: 8px; }
.toolbar-buttons button, .toolbar-buttons .upload{ border: 1px solid var(--separator); background: #fff; border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.char-counter{ 
  font-size: 12px; 
  color: var(--muted); 
  padding: 6px 10px; 
  background: rgba(0,0,0,0.05); 
  border-radius: 8px; 
  min-width: 80px; 
  text-align: center; 
}
.char-counter.warning{ color: #ff9500; }
.char-counter.error{ color: #dc3545; }
.note-content{ 
  flex: 1; 
  padding: 18px 24px; 
  overflow: auto; 
  line-height: 1.5; 
  outline: none;
}
.note-content:empty:before{ content: attr(placeholder); color: var(--muted); }
.note-content img{ max-width: 100%; border-radius: 6px; }

/* Notifications */
.notification{ 
  position: fixed; 
  top: 20px; 
  right: 20px; 
  padding: 12px 16px; 
  border-radius: 8px; 
  color: white; 
  font-weight: 500; 
  z-index: 1000; 
  max-width: 300px; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
}
.notification.success{ background: #28a745; }
.notification.error{ background: #dc3545; }
.notification.info{ background: #17a2b8; }

@media (max-width: 1100px){
  #app{ grid-template-columns: 220px 280px 1fr; }
}