/* Styles 2/8 (lines 212–483 of styles.css until v122) — Goal and Tasks tabs, editing lists, toast, chat, action cards, sheets, quick replies, Journal, Log.
   Order matters (a later rule wins): index.html loads css/1-… → css/8-… in this order; see docs/REFACTOR.md step 4. */
/* GOAL TAB */
.goal-title{font-size:19px; font-weight:600; margin:0 0 4px;}
.goal-empty{color:var(--muted); font-size:14px; line-height:1.6;}
.flag-banner{
  background:var(--bad-bg); border:1px solid var(--bad); color:var(--bad-text); border-radius:var(--r-sm);
  padding:10px 13px; font-size:13px; margin:14px 0; line-height:1.5;
}
.milestone-list{list-style:none; padding:0; margin:18px 0 0; display:flex; flex-direction:column; gap:8px;}
.milestone-list li{
  display:flex; align-items:center; gap:10px; padding:13px 14px; border-radius:var(--r);
  background:var(--panel-2); border:1px solid var(--line); font-size:15px;
}
.milestone-list li.reached{background:var(--ok-bg); border-color:var(--ok); color:var(--ok-text);}
.dot{width:9px; height:9px; border-radius:50%; background:var(--muted); flex:0 0 auto;}
.dot.reached{background:var(--ok);}

/* TASKS TAB */
.task-list{list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:8px;}
.task-list li{
  display:flex; align-items:center; gap:10px; padding:12px 12px 12px 14px; border-radius:var(--r);
  background:var(--panel-2); border:1px solid var(--line); font-size:15px;
}
.task-list li.done{background:var(--ok-bg); border-color:var(--ok); color:var(--ok-text);}
.task-list li.not_done{background:var(--bad-bg); border-color:var(--bad); color:var(--bad-text);}
.status-badge{font-size:11.5px; padding:3px 9px; border-radius:var(--r-pill); margin-left:auto; flex:0 0 auto; white-space:nowrap;}
.task-list .status-badge{padding:7px 11px;} /* bigger tap target on the phone */
.status-badge.pending{background:var(--panel); color:var(--muted); border:1px solid var(--line);}
.status-badge.done{background:#6fae7c; color:#132116;} /* badges: same in both themes */
.status-badge.not_done{background:#d97a6a; color:#2b120d;}
.status-badge.partial{background:var(--accent-fill); color:#2b1e04;}

/* EDITING LISTS: "Edit" → ⊖ · text field · ≡ */
.list-head{display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:14px; min-height:20px;}
.list-head .hint{margin:0 auto 0 0;}
.list-head .text-btn{padding:4px 0; min-width:0; font-weight:600;}
.list-head + .task-list, .list-head + .milestone-list{margin-top:6px;}
.task-list.editing li, .milestone-list.editing li{padding:6px 6px 6px 8px; gap:6px; background:var(--panel-2); border-color:var(--line); color:var(--text);}
.row-del{flex:0 0 auto; width:34px; height:34px; border:none; background:none; padding:0; color:var(--bad); display:flex; align-items:center; justify-content:center; cursor:pointer;}
.row-del svg{width:22px; height:22px; fill:var(--bad); stroke:#fff; stroke-width:2.2; stroke-linecap:round;}
.row-del svg circle{stroke:none;}
.row-input{flex:1; min-width:0; background:var(--panel) !important; padding:8px 10px !important;}
.row-handle{flex:0 0 auto; width:38px; height:38px; display:flex; align-items:center; justify-content:center; color:var(--muted); cursor:grab; touch-action:none;}
.row-handle svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round;}
.task-list.editing li, .milestone-list.editing li{position:relative;}
li.dragging{box-shadow:0 8px 22px rgba(0,0,0,.35); border-color:var(--accent-fill) !important; z-index:2;}
.task-list.editing, .milestone-list.editing{user-select:none; -webkit-user-select:none;}
.row-input{user-select:text; -webkit-user-select:text;}
.add-row{margin-top:10px;}
.add-row[hidden]{display:none;}

/* TOAST ("Task deleted · Undo") — above the tab bar */
.toast{
  position:fixed; left:calc(var(--safe-left) + 12px); right:calc(var(--safe-right) + 12px);
  bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 12px); z-index:15;
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r);
  background:var(--text); color:var(--bg); font-size:14.5px; box-shadow:0 6px 20px rgba(0,0,0,.3);
}
.toast[hidden]{display:none;}
.toast.show{animation:msg-in .25s ease;}
.toast span{flex:1;}
.toast .toast-goose{flex:0 0 34px; height:34px; border-radius:50%; overflow:hidden;}
.toast .toast-goose[hidden]{display:none;}
.toast .toast-goose svg{display:block;}
.toast button{background:none; border:none; color:var(--accent-fill); font-weight:700; font-size:14.5px; padding:4px 2px; cursor:pointer;}

/* CHAT TAB */
.messages{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:14px 12px; display:flex; flex-direction:column; gap:10px;}
.msg{max-width:85%; padding:10px 14px; border-radius:var(--r-lg); line-height:1.5; font-size:15px; word-wrap:break-word;}
.msg p{margin:0 0 6px;} .msg p:last-child{margin-bottom:0;}
.msg ul{margin:4px 0; padding-left:18px;}
.msg.user{align-self:flex-end; background:var(--accent-dim); color:var(--user-text); border-bottom-right-radius:4px;}
.msg.agent{align-self:flex-start; background:var(--panel-2); border:1px solid var(--line); border-bottom-left-radius:4px;}
.msg.system-note{align-self:center; color:var(--muted); font-size:12px; font-style:italic; background:none; padding:2px; text-align:center;}
/* Action cards — what the agent actually saved (goal, tasks, progress) */
.action-card{
  align-self:stretch; background:var(--ok-bg); border:1px solid var(--ok-border); border-left:3px solid var(--ok);
  border-radius:var(--r); padding:10px 14px; font-size:14px; line-height:1.45; word-break:break-word;
}
.action-card.goal{background:var(--goal-bg); border-color:var(--goal-border); border-left-color:var(--accent-fill);}
.action-card.bad{background:var(--bad-bg); border-color:var(--bad-border); border-left-color:var(--bad);}
.action-card.neutral{background:var(--panel-2); border-color:var(--line); border-left-color:var(--muted);}
.ac-title{font-weight:600; font-size:13px; color:var(--muted); margin-bottom:3px;}
.action-card.ok .ac-title{color:var(--ok);}
.action-card.goal .ac-title{color:var(--accent);}
.action-card.bad .ac-title{color:var(--bad);}
.ac-text{font-weight:600; color:var(--text);}
.ac-list-title{margin-top:8px; font-size:12.5px; color:var(--muted);}
.ac-list{margin:4px 0 0; padding-left:20px;}
.ac-list li{margin:3px 0;}
.ac-note{margin-top:6px; font-size:13px; color:var(--muted);}
.ac-warn{margin-top:8px; font-size:12.5px; color:var(--bad-text); background:var(--bad-bg); border-radius:var(--r-sm); padding:6px 9px;}
.composer{border-top:1px solid var(--line); padding:8px 10px; display:flex; gap:8px; flex:0 0 auto; align-items:flex-end; background:var(--panel);}
.composer textarea{
  flex:1; min-height:40px; max-height:120px; font-family:var(--sans); font-size:16px; line-height:1.35;
  background:var(--panel-2); border:1px solid var(--line); color:var(--text); border-radius:var(--r-pill); padding:9px 14px; resize:none;
}
.composer button{
  background:var(--accent-fill); color:var(--on-accent); border:none; width:40px; height:40px; border-radius:50%;
  cursor:pointer; flex:0 0 auto; display:flex; align-items:center; justify-content:center; padding:0;
  transition:transform .22s cubic-bezier(.3,1.4,.5,1), opacity .18s ease, width .22s ease, margin .22s ease;
}
.composer button svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;}
.composer button:active{transform:scale(.88);}
.composer button:disabled{opacity:.5; cursor:default;}
/* Send button pops in only when there is something to send (Telegram-like) */
/* Message length: counter near the limit; over it — red text, send button off. */
.composer-limit{flex:0 0 auto; padding:6px 14px 0; font-size:12.5px; color:var(--muted); text-align:right; background:var(--panel); border-top:1px solid var(--line);}
.composer-limit[hidden]{display:none;}
.composer-limit.over{color:var(--bad); text-align:left;}
.composer-limit:not([hidden]) + .composer{border-top:none;}
.composer.over textarea{border-color:var(--bad);}
.composer.over button{opacity:.35; pointer-events:none;}
.composer:not(.has-text) button{transform:scale(.3); opacity:0; width:0; margin-left:-8px; pointer-events:none;}

/* MESSAGE ANIMATIONS (only for new messages, not when the chat is re-drawn) */
.msg.user.anim-in{animation:msg-out .32s cubic-bezier(.2,.9,.3,1.15); transform-origin:100% 100%;}
.msg.agent.anim-in, .action-card.anim-in{animation:msg-in .32s cubic-bezier(.2,.9,.3,1.15); transform-origin:0 100%;}
.msg.system-note.anim-in{animation:fade-in .3s ease;}
@keyframes msg-out{from{opacity:0; transform:translateY(14px) scale(.85);} to{opacity:1; transform:none;}}
@keyframes msg-in{from{opacity:0; transform:translateY(10px) scale(.9);} to{opacity:1; transform:none;}}
@keyframes fade-in{from{opacity:0;} to{opacity:1;}}
/* The agent's words appear one after another, like being typed out */
.msg .w{opacity:0; animation:word-in .22s ease forwards;}
@keyframes word-in{from{opacity:0; filter:blur(2px);} to{opacity:1; filter:none;}}

/* HIDDEN SETTINGS — slides up from the bottom like an iOS sheet */
.overlay{position:fixed; inset:0; background:var(--overlay); display:none; z-index:10;}
.overlay.open{display:block;}
.drawer{
  position:fixed; left:0; right:0; bottom:0; height:88%; background:var(--panel);
  border-top:1px solid var(--line); border-radius:var(--r-lg) var(--r-lg) 0 0; z-index:11;
  transform:translateY(100%); transition:transform .25s ease; display:flex; flex-direction:column;
  padding:0 var(--safe-right) 0 var(--safe-left);
}
.drawer.open{transform:translateY(0);}
.drawer-short{height:auto; max-height:88%;} /* user settings: only as tall as its content */
.drawer-head{padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; flex:0 0 auto;}
.drawer-head strong{font-size:16px;}
.drawer-head button{background:none; border:none; color:var(--muted); font-size:20px; cursor:pointer; padding:4px 8px;}
.drawer-body{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 18px calc(var(--safe-bottom) + 20px);}
label{display:block; font-size:12px; color:var(--muted); margin:16px 0 6px;}
label:first-child{margin-top:0;}
select, textarea{
  width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  border-radius:var(--r-sm); padding:10px; font-family:var(--sans); font-size:16px;
}
input[type=text], input[type=password]{
  background:var(--panel-2); border:1px solid var(--line); color:var(--text); width:100%;
  border-radius:var(--r-sm); padding:11px 12px; font-family:var(--sans); font-size:16px; /* 16px = iPhone won't auto-zoom */
}
.manual-controls{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; align-items:center;}
.manual-controls input[type=text]{flex:1; min-width:0;}
.ghost-btn{
  background:none; border:1px solid var(--line); color:var(--muted); border-radius:var(--r-sm);
  padding:10px 14px; font-size:14px; cursor:pointer; white-space:nowrap;
}
.primary-btn{
  background:var(--accent-fill); color:var(--on-accent); border:none; border-radius:var(--r-sm);
  padding:10px 16px; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.manual-form{
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 16px; margin-bottom:16px;
}
.manual-form label{margin-top:12px;}
.manual-form label:first-child{margin-top:0;}
.manual-form input[type=text], .manual-form textarea{background:var(--panel);}
.manual-form-actions{display:flex; gap:8px; margin-top:12px;}

/* QUICK REPLIES — one horizontally scrolling row */
.quick-replies{display:flex; gap:6px; padding:8px 10px; flex:0 0 auto; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.quick-replies::-webkit-scrollbar{display:none;}
.quick-replies:empty{display:none;}
.quick-replies.asked{display:none;} /* v141: the chat's last item has its own buttons (chat-view.js) */
/* Outlined in the accent colour so suggestions don't look like the manager's messages. */
.qr-chip{
  background:transparent; border:1px solid var(--chip-border); color:var(--accent); border-radius:var(--r-pill);
  padding:7px 13px; font-size:13.5px; font-weight:500; cursor:pointer; white-space:nowrap; flex:0 0 auto;
  transition:transform .15s ease, background .15s ease;
}
/* Press: shrinks under the finger, then a short springy pop when the text lands in the input */
.qr-chip:active{transform:scale(.92); background:var(--accent-dim);}
.qr-chip.tapped{animation:chip-pop .35s cubic-bezier(.3,1.6,.5,1);}
@keyframes chip-pop{0%{transform:scale(.92);} 50%{transform:scale(1.06); background:var(--accent-dim);} 100%{transform:scale(1);}}
/* No-AI manager's buttons: "back/cancel" quieter, "try with AI" filled. */
.qr-chip.ghost{border-color:var(--line); color:var(--muted);}
.qr-chip.accent{background:var(--accent-fill); border-color:var(--accent-fill); color:var(--on-accent);}

/* Segmented control (theme picker) */
.seg{display:flex; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden;}
.seg button{flex:1; background:var(--panel-2); color:var(--muted); border:none; padding:11px 4px; font-size:14px; cursor:pointer;}
.seg button + button{border-left:1px solid var(--line);}
.seg button.active{background:var(--accent-dim); color:var(--accent); font-weight:600;}

/* JOURNAL (sub-page opened from Goal / Tasks) */
.j-goal{background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r); margin-bottom:10px; overflow:hidden;}
.j-goal summary{list-style:none; cursor:pointer; padding:13px 14px; display:flex; flex-direction:column; gap:5px;}
.j-goal summary::-webkit-details-marker{display:none;}
.j-goal[open] summary{border-bottom:1px solid var(--line);}
.j-goal-top{display:flex; align-items:center; gap:10px;}
.j-goal-title{font-weight:600; font-size:15px; flex:1;}
.j-meta{color:var(--muted); font-size:12px;}
.j-badge{font-size:11px; padding:2px 9px; border-radius:var(--r-pill); flex:0 0 auto;}
.j-badge.active{background:var(--accent-dim); color:var(--accent);}
.j-badge.completed{background:#6fae7c; color:#132116;}
.j-badge.changed{background:var(--panel); color:var(--muted); border:1px solid var(--line);}
.j-ms-list{list-style:none; margin:0; padding:10px 14px 14px; display:flex; flex-direction:column; gap:8px;}
.j-ms-list li{display:flex; align-items:center; gap:10px; font-size:14px; flex-wrap:wrap;}
.j-ms-list .j-date{margin-left:auto; color:var(--muted); font-family:var(--mono); font-size:11px;}
.j-ms-list li.reached .j-date{color:var(--ok);}
.j-summary-text{padding:0 14px 14px; color:var(--muted); font-size:13px; line-height:1.5;}
.j-day{margin-bottom:20px;}
.j-day-head{display:flex; align-items:baseline; gap:10px; margin-bottom:8px;}
.j-day-title{font-weight:600; font-size:14.5px;}
.j-day-count{color:var(--muted); font-size:12px;}
.j-task-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px;}
.j-task-list li{display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:var(--r-sm); background:var(--panel-2); border:1px solid var(--line); font-size:14px; flex-wrap:wrap;}
.j-task-list li.done{border-color:var(--ok); background:var(--ok-bg);}
.j-task-list li.not_done{border-color:var(--bad); background:var(--bad-bg);}
.j-task-list .j-date{color:var(--muted); font-family:var(--mono); font-size:11px; white-space:nowrap;}
.j-task-desc{flex:1; min-width:60%;}

/* LOG (sub-page opened from Settings) */
.log-list{list-style:none; padding:0; margin:10px 0 0; display:flex; flex-direction:column; gap:6px;}
.log-list li{
  display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline; padding:9px 11px; border-radius:var(--r-sm);
  background:var(--panel-2); border:1px solid var(--line); font-size:12.5px;
}
.log-list .log-time{color:var(--muted); font-family:var(--mono); font-size:11px; flex:0 0 auto; white-space:nowrap;}
.log-list .log-type{
  flex:0 0 auto; font-size:9.5px; text-transform:uppercase; letter-spacing:.4px; padding:2px 6px;
  border-radius:4px; font-weight:600;
}
.log-type.session{background:var(--log-session-bg); color:var(--log-session);}
.log-type.chat{background:var(--accent-dim); color:var(--accent);}
.log-type.tool{background:var(--log-tool-bg); color:var(--ok);}
.log-type.manual{background:var(--log-manual-bg); color:var(--log-manual);}
.log-type.error{background:var(--bad-bg); color:var(--bad);}
.log-type.tab{background:var(--log-tab-bg); color:var(--log-tab);}
.log-list .log-detail{flex:1 1 100%; word-break:break-word;}

.connect-text{font-size:15px; line-height:1.5; margin:0 0 12px;}
select{cursor:pointer;}
.hint{color:var(--muted); font-size:12px; margin-top:6px; line-height:1.45;}
.push-status{margin-top:0; color:var(--text);}
.push-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.push-actions:empty{display:none;}
/* Consent switch (Settings) */
.switch-row{display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--r); padding:12px 14px; margin:0; color:var(--text); font-size:15px; cursor:pointer;}
.switch{appearance:none; -webkit-appearance:none; width:50px; height:30px; border-radius:15px; background:var(--line); position:relative;
  flex:0 0 auto; cursor:pointer; transition:background .2s ease; margin:0;}
.switch::after{content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .22s cubic-bezier(.3,1.3,.5,1);}
.switch:checked{background:var(--ok);}
.switch:checked::after{transform:translateX(20px);}
.text-link{background:none; border:none; padding:4px 0; color:var(--accent); font-size:13.5px; cursor:pointer; text-decoration:underline;}
.policy h3{font-size:15px; margin:18px 0 6px;}
.policy h3:first-child{margin-top:0;}
.policy p{font-size:14px; line-height:1.55; margin:0; color:var(--text);}

.app-diag{margin-top:22px; font-family:var(--mono); font-size:10.5px; opacity:.7;}
.reset-btn{
  margin-top:24px; width:100%; background:none; border:1px solid var(--line); color:var(--muted);
  padding:12px; border-radius:var(--r-sm); cursor:pointer; font-size:14px;
}
.reset-btn:active{border-color:var(--bad); color:var(--bad);}
.reset-btn.danger{margin-top:14px; color:var(--bad); border-color:var(--bad-border);}
.danger-btn{background:var(--bad); color:#fff;}
.danger-btn:disabled{opacity:.4; cursor:default;}
.wipe-warn{font-size:15px; line-height:1.5; margin:0 0 10px; color:var(--bad-text); background:var(--bad-bg); border:1px solid var(--bad-border); border-radius:var(--r); padding:10px 12px;}
.status-badge.dropped{background:var(--panel); color:var(--muted); border:1px dashed var(--line);}