:root{
  --bg: #FBF7EF;
  --card: #FFFFFF;
  --card-border: #ECE4D3;
  --ink: #2A2620;
  --ink-soft: #9C9484;
  --accent-urgent: #E4574C;
  --accent-urgent-bg: #FBDCD8;
  --accent-plans: #6B6357;
  --accent-plans-bg: #EFE9DC;
  --accent-groceries: #3E8E5B;
  --accent-groceries-bg: #DCEFE0;
  --accent-things: #3C6FD1;
  --accent-things-bg: #DCE6FA;
  --danger: #E4574C;
  --radius-lg: 26px;
  --radius-md: 18px;
  --nav-height: 92px;
  --topbar-height: 56px;
}

*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
button{font-family:inherit;}

#app{
  position:fixed;inset:0;
  display:flex;flex-direction:column;
  height:100%;
}

/* ---------- Top bar (shown only while editing) ---------- */
.topbar{
  height:var(--topbar-height);
  min-height:var(--topbar-height);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 8px;
  background:var(--bg);
  z-index:20;
}
.topbar.hidden{display:none;}
.topbar-title{font-size:15px;color:var(--ink-soft);font-weight:600;}
.icon-btn{
  width:42px;height:42px;border-radius:50%;
  border:none;background:transparent;color:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.icon-btn:active{background:rgba(0,0,0,0.06);}

/* ---------- Views ---------- */
.view{
  flex:1;min-height:0;
  display:flex;flex-direction:column;
}
.view.hidden{display:none;}

/* ---------- List view (Срочно / Планы) ---------- */
.list-view{
  padding:16px 16px calc(var(--nav-height) + 90px) 16px;
  overflow-y:auto;
  gap:14px;
}
.cards-container{
  display:flex;flex-direction:column;gap:14px;
}
.note-card{
  position:relative;
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius-lg);
  padding:18px 52px 16px 20px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.note-card.dragging{
  box-shadow:0 10px 24px rgba(0,0,0,0.12);
  transform:scale(1.02);
  z-index:5;
}
.note-card-text{
  font-size:17px;line-height:1.4;
  white-space:pre-wrap;
  display:-webkit-box;
  -webkit-line-clamp:6;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
}
.note-card-meta{
  margin-top:10px;font-size:13px;color:var(--ink-soft);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.note-card-meta .reminder-chip{
  color:var(--accent-urgent);
  font-weight:600;
}
.note-card-trash{
  position:absolute;top:14px;right:12px;
  width:34px;height:34px;border-radius:50%;
  border:none;background:transparent;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;
}
.note-card-trash:active{background:rgba(0,0,0,0.06);}

.new-note-field{
  position:fixed;
  left:16px;right:16px;
  bottom:calc(var(--nav-height) + 14px);
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius-md);
  padding:16px 18px;
  text-align:left;
  font-size:16px;color:var(--ink-soft);
  box-shadow:0 6px 20px rgba(0,0,0,0.06);
}

/* ---------- Fullscreen editor ---------- */
.editor-view, .shopping-view{
  padding:10px 12px calc(var(--nav-height) + 12px) 12px;
}
/* The visible bordered field: inset from the screen edges on every side,
   so the beige background stays visible as a frame around it. */
.editor-card{
  flex:1;min-height:0;
  display:flex;flex-direction:column;
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius-lg);
  box-shadow:0 8px 24px rgba(0,0,0,0.06);
  overflow:hidden;
  transform-origin:top left;
}
.editor-textarea{
  flex:1;width:100%;
  border:none;outline:none;resize:none;
  background:transparent;
  font-size:18px;line-height:1.5;
  color:var(--ink);
  font-family:inherit;
  padding:18px 18px 8px 18px;
}
.editor-footer{
  padding:6px 18px 16px 18px;
}
.reminder-btn{
  width:100%;
  border:1px solid var(--card-border);
  background:var(--bg);
  border-radius:var(--radius-md);
  padding:14px;
  font-size:15px;color:var(--ink);
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.reminder-btn.set{
  color:var(--accent-urgent);
  border-color:var(--accent-urgent-bg);
  background:var(--accent-urgent-bg);
  font-weight:600;
}
.shopping-view .editor-card .editor-textarea{
  padding:18px;
}

/* ---------- Send button (new note composer) ---------- */
.send-btn{
  position:fixed;
  right:20px;
  bottom:calc(var(--nav-height) + 18px);
  width:52px;height:52px;border-radius:50%;
  background:var(--ink);color:#fff;
  border:none;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,0.22);
  transition:transform .15s ease, width .15s ease, height .15s ease;
  z-index:15;
}
.send-btn.grown{width:60px;height:60px;}
.send-btn.hidden{display:none;}
.send-btn:active{transform:scale(0.92);}

/* ---------- Inline delete confirm popover ---------- */
.confirm-popover{
  position:fixed;
  display:flex;align-items:center;gap:6px;
  background:var(--ink);color:#fff;
  border-radius:14px;
  padding:6px 8px;
  font-size:13px;
  z-index:30;
  box-shadow:0 6px 16px rgba(0,0,0,0.25);
}
.confirm-popover.hidden{display:none;}
.confirm-label{padding-left:4px;white-space:nowrap;}
.confirm-yes,.confirm-no{
  border:none;border-radius:10px;padding:6px 10px;font-size:13px;font-weight:600;
}
.confirm-yes{background:var(--danger);color:#fff;}
.confirm-no{background:rgba(255,255,255,0.15);color:#fff;}

/* ---------- Bottom navigation ---------- */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;
  height:var(--nav-height);
  display:flex;gap:8px;
  padding:8px 10px calc(10px + env(safe-area-inset-bottom)) 10px;
  background:var(--bg);
  z-index:25;
}
.nav-btn{
  flex:1;
  border:2px solid transparent;
  border-radius:20px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;
  padding:8px 4px;
  font-size:12px;font-weight:600;line-height:1.15;
  background:var(--accent-plans-bg);
  color:var(--accent-plans);
}
.nav-urgent{background:var(--accent-urgent-bg);color:var(--accent-urgent);}
.nav-plans{background:var(--accent-plans-bg);color:var(--accent-plans);}
.nav-groceries{background:var(--accent-groceries-bg);color:var(--accent-groceries);}
.nav-things{background:var(--accent-things-bg);color:var(--accent-things);}

.nav-btn.active{border-color:currentColor;}

/* ---------- Reminder modal ---------- */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,0.35);
  display:flex;align-items:flex-end;justify-content:center;
  z-index:40;
}
.modal-backdrop.hidden{display:none;}
.modal-sheet{
  width:100%;max-width:480px;
  background:var(--bg);
  border-radius:24px 24px 0 0;
  padding:20px 20px calc(20px + env(safe-area-inset-bottom));
}
.modal-sheet h3{margin:0 0 14px 0;font-size:17px;}
.modal-sheet input[type="datetime-local"]{
  width:100%;padding:12px;border-radius:14px;border:1px solid var(--card-border);
  font-size:16px;background:var(--card);color:var(--ink);
}
.modal-actions{display:flex;gap:10px;margin-top:16px;}
.modal-actions button{
  flex:1;padding:13px;border-radius:14px;border:none;font-size:15px;font-weight:600;
}
.modal-cancel{background:var(--card-border);color:var(--ink);}
.modal-clear{background:var(--accent-urgent-bg);color:var(--accent-urgent);}
.modal-save{background:var(--ink);color:#fff;}

.editor-card.growing{
  transition:transform .26s cubic-bezier(.2,.7,.3,1);
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;}
}