* { box-sizing: border-box; }
body { margin: 0; height: 100vh; overflow: hidden; font-family: Arial, sans-serif; color: #1a1a1a; background: #fff; }
.app { display: grid; grid-template-columns: var(--sidebar-width, 320px) 5px 1fr; height: 100vh; overflow: hidden; }
.sidebar { padding: 12px; min-height: 0; overflow: auto; }
.resizer { background: #ddd; cursor: col-resize; user-select: none; transition: background 0.15s; }
.resizer:hover, .resizer.dragging { background: #aaa; }
.sidebar h2 { margin: 0 0 12px; font-size: 18px; }
#file-search { width: 100%; margin: 0 0 10px; padding: 8px; border: 1px solid #ccc; border-radius: 6px; }
#file-list { list-style: none; padding: 0; margin: 0; }
#file-list li { display: flex; align-items: flex-start; gap: 8px; padding: 8px; border-radius: 6px; cursor: pointer; margin-bottom: 4px; }
#file-list li:hover, #file-list li.active { background: #eef4ff; }
.file-item-label { overflow-wrap: anywhere; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.file-item-title { font-size: 14px; font-weight: 600; }
.file-item-path { font-size: 12px; color: #666; }
.unread-dot { width: 9px; height: 9px; border-radius: 50%; background: #8be28b; flex: 0 0 auto; }
.content { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.toolbar { display: flex; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid #ddd; }
#toolbar-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.app-menu { position: relative; }
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #5f6368;
  cursor: pointer;
}
.icon-button:hover { background: #f1f3f4; }
.icon-button:focus-visible { outline: 2px solid #4b8df8; outline-offset: 1px; }
.app-grid-icon {
  display: grid;
  grid-template-columns: repeat(3, 4px);
  gap: 4px;
}
.app-grid-icon span {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
}
.menu-popup {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 170px;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 6px;
  z-index: 1000;
}
.menu-item {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
}
.menu-item:hover, .menu-item:focus-visible { background: #eef4ff; outline: none; }
.menu-item-content { display: flex; align-items: center; gap: 8px; width: 100%; }
.menu-item-label { flex: 1; text-align: right; }
.menu-item-icon { display: inline-flex; width: 14px; height: 14px; color: #5f6368; flex: 0 0 auto; margin-left: auto; }
.menu-item-icon svg { width: 100%; height: 100%; display: block; fill: currentColor; }
#editor { flex: 1; min-height: 0; padding: 20px; overflow: auto; outline: none; }
#editor[contenteditable="false"] { color: #666; background: #fafafa; }
#current-file { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#editor pre { background: #f5f5f5; padding: 10px; border-radius: 6px; overflow: auto; }
#editor table { border-collapse: collapse; width: 100%; }
#editor th, #editor td { border: 1px solid #ccc; padding: 8px; }
#editor .mermaid-wrapper { background: #fff; padding: 8px; border: 1px solid #ddd; border-radius: 6px; }
#editor .mermaid-source { display: none; }

@media (max-width: 1099px) {
  .toolbar { flex-direction: column; align-items: flex-start; }
  #current-file { width: 100%; }
  #toolbar-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .app-menu { margin-left: auto; }
}