/* tool.css — Feedback Tool v2 styling */

:root{
  --ink:#15172b; --ink-soft:#4a4e6b; --ink-mute:#7d82a3;
  --line:#e4e5f1; --line-soft:#eef0fa;
  --indigo:#5b5bd6; --violet:#7c4ddb; --cyan:#0e9fb8; --pink:#d4537e;
  --bg:#f5f6fb; --paper:#ffffff;
  --side-bg:#f8f8fc;
  --frame-edit:#5b5bd6; --frame-edit-bg:rgba(91,91,214,.08);
  --frame-annotate:#d8902f; --frame-annotate-bg:rgba(216,144,47,.10);
  --frame-diff:#1d9e75; --frame-diff-bg:rgba(29,158,117,.10);
  --danger:#d4537e; --danger-bg:#fde8ef;
  --ok:#1d9e75; --warn:#d8902f;
}

*{box-sizing:border-box; margin:0; padding:0}

/* Ensure the [hidden] attribute always wins (overrides any display rule) */
[hidden] { display: none !important; }

html,body{height:100%}
body{
  font-family:Inter,system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:13.5px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.ft-shell{
  display:grid; grid-template-rows:auto 1fr auto;
  height:100vh; min-height:600px;
}

/* ============ TOOLBAR ============ */

.ft-toolbar{
  display:flex; align-items:center; gap:16px;
  padding:10px 16px; background:var(--paper);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 3px rgba(20,23,43,.04);
  flex-wrap:wrap;
}
.ft-brand{
  display:flex; align-items:center; gap:8px;
  padding-right:14px; border-right:1px solid var(--line);
}
.ft-logo{color:var(--indigo); font-size:18px}
.ft-name{font-family:Sora,sans-serif; font-weight:700; font-size:14px; letter-spacing:-.01em}
.ft-version{font-size:10px; font-weight:600; color:var(--ink-mute); padding:1px 5px; background:var(--line-soft); border-radius:3px}

.ft-toolbar-group{
  display:flex; align-items:center; gap:10px;
  padding-right:14px; border-right:1px solid var(--line);
}
.ft-toolbar-group:last-child{border-right:0; padding-right:0; margin-left:auto}

.ft-field{
  display:flex; align-items:center; gap:6px;
}
.ft-label{
  font-size:11px; font-weight:600; color:var(--ink-mute);
  letter-spacing:.06em; text-transform:uppercase;
}
.ft-field select, .ft-field input[type="text"]{
  font:inherit; font-size:12.5px;
  padding:5px 8px; border:1px solid var(--line);
  border-radius:5px; background:var(--paper); color:var(--ink);
  cursor:pointer; min-width:140px;
}
.ft-field select:focus, .ft-field input:focus{
  outline:0; border-color:var(--indigo); box-shadow:0 0 0 2px rgba(91,91,214,.15);
}

.ft-upload button{
  font:inherit; font-size:12.5px;
  padding:5px 10px; border:1px solid var(--line);
  border-radius:5px; background:var(--paper); cursor:pointer;
  color:var(--ink-soft);
}
.ft-upload button:hover{background:var(--line-soft); color:var(--ink)}

.ft-mode-toggle{
  display:inline-flex; padding:3px; background:var(--line-soft);
  border-radius:6px;
}
.ft-mode-btn{
  font:inherit; font-size:12px; font-weight:600;
  padding:5px 12px; border:0; background:transparent;
  color:var(--ink-mute); cursor:pointer; border-radius:4px;
  transition:all .15s;
}
.ft-mode-btn.active{
  background:var(--paper); color:var(--indigo);
  box-shadow:0 1px 3px rgba(20,23,43,.08);
}
.ft-mode-btn:not(.active):hover{color:var(--ink)}

.ft-toggle-btn, .ft-primary-btn, .ft-ghost-btn, .ft-danger-btn{
  font:inherit; font-size:12px; font-weight:600;
  padding:6px 12px; border-radius:5px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  transition:all .15s;
}
.ft-toggle-btn{
  background:var(--paper); border:1px solid var(--line); color:var(--ink-soft);
}
.ft-toggle-btn[aria-pressed="true"]{
  background:var(--frame-diff-bg); border-color:var(--frame-diff); color:var(--ok);
}
.ft-toggle-btn .ft-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--line); transition:all .15s;
}
.ft-toggle-btn[aria-pressed="true"] .ft-dot{background:var(--ok)}

.ft-primary-btn{
  background:var(--indigo); color:#fff; border:1px solid var(--indigo);
}
.ft-primary-btn:hover:not(:disabled){background:#4a4ac6}
.ft-primary-btn:disabled{opacity:.45; cursor:not-allowed}

.ft-ghost-btn{
  background:transparent; border:1px solid var(--line); color:var(--ink-soft);
}
.ft-ghost-btn:hover{background:var(--line-soft); color:var(--ink)}

.ft-danger-btn{
  background:var(--paper); border:1px solid var(--line); color:var(--danger);
}
.ft-danger-btn:hover:not(:disabled){background:var(--danger-bg); border-color:var(--danger)}
.ft-danger-btn:disabled{opacity:.45; cursor:not-allowed}

/* ============ MAIN AREA ============ */

.ft-main{
  display:grid; grid-template-columns:1fr 360px;
  min-height:0; overflow:hidden;
}

/* Document area */
.ft-doc-area{
  position:relative; overflow:auto;
  background:var(--bg);
  padding:24px;
}
.ft-doc-empty{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px;
  color:var(--ink-soft);
}
.ft-empty-icon{font-size:48px; margin-bottom:12px; opacity:.5}
.ft-doc-empty h2{
  font-family:Sora,sans-serif; font-size:18px; font-weight:600;
  color:var(--ink); margin-bottom:10px;
}
.ft-doc-empty p{font-size:13px; max-width:440px; margin-bottom:8px}
.ft-empty-hint{font-size:12px; color:var(--ink-mute)}
.ft-empty-hint code{
  font-family:JetBrains Mono,monospace; font-size:11px;
  background:var(--line-soft); padding:1px 5px; border-radius:3px;
}

.ft-doc-frame{
  width:100%; height:100%; min-height:calc(100vh - 200px);
  border:0; background:var(--paper);
  border-radius:6px; box-shadow:0 4px 20px rgba(20,23,43,.08);
}

/* ============ SIDEBAR ============ */

.ft-sidebar{
  background:var(--side-bg);
  border-left:1px solid var(--line);
  display:flex; flex-direction:column;
  min-height:0; overflow:hidden;
}

.ft-side-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 10px; border-bottom:1px solid var(--line);
}
.ft-side-header h3{
  font-family:Sora,sans-serif; font-size:13px; font-weight:600;
  color:var(--ink); letter-spacing:-.01em;
}
.ft-count{
  font-family:JetBrains Mono,monospace; font-size:11px; font-weight:600;
  background:var(--indigo); color:#fff;
  padding:2px 8px; border-radius:10px; min-width:22px; text-align:center;
}

.ft-log{
  flex:1; overflow-y:auto;
  padding:8px 12px;
  display:flex; flex-direction:column; gap:6px;
}
.ft-log-empty{
  text-align:center; color:var(--ink-mute); font-size:12px;
  padding:24px 12px; line-height:1.5;
}

.ft-log-item{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:6px;
  padding:9px 10px;
  font-size:12px;
  border-left:3px solid var(--frame-edit);
}
.ft-log-item.mode-annotate{border-left-color:var(--frame-annotate)}
.ft-log-item.unapplied{opacity:.55; border-left-color:var(--ink-mute)}

.ft-log-item-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-bottom:5px;
}
.ft-log-item-type{
  font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--indigo);
}
.ft-log-item.mode-annotate .ft-log-item-type{color:var(--warn)}
.ft-log-item-time{
  font-family:JetBrains Mono,monospace; font-size:10px; color:var(--ink-mute);
}
.ft-log-item-section{
  font-size:11px; color:var(--ink-soft); margin-bottom:5px;
  font-weight:500;
}
.ft-log-item-diff{
  font-size:11.5px; padding:5px 7px;
  background:var(--line-soft); border-radius:4px;
  margin-bottom:5px;
}
.ft-log-item-diff .old{
  color:var(--danger); text-decoration:line-through;
  text-decoration-color:rgba(212,83,126,.5);
}
.ft-log-item-diff .arrow{color:var(--ink-mute); margin:0 4px}
.ft-log-item-diff .new{color:var(--ok); font-weight:500}
.ft-log-item-text{
  font-size:11.5px; color:var(--ink-soft);
  padding:5px 7px; background:var(--frame-annotate-bg);
  border-radius:4px; margin-bottom:5px;
}
.ft-log-item-reason{
  font-size:10.5px; color:var(--ink-mute); font-style:italic;
  margin-bottom:5px;
}
.ft-log-item-chain{
  display:inline-flex; align-items:center; gap:3px;
  font-size:9.5px; font-weight:600; color:var(--violet);
  background:rgba(124,77,219,.10); padding:1px 6px; border-radius:3px;
  margin-bottom:5px;
}
.ft-log-item-actions{
  display:flex; gap:5px;
}
.ft-log-item-actions button{
  font:inherit; font-size:10.5px; font-weight:600;
  padding:3px 8px; border-radius:3px;
  border:1px solid var(--line); background:var(--paper);
  color:var(--ink-soft); cursor:pointer;
  transition:all .12s;
}
.ft-log-item-actions button:hover{background:var(--line-soft); color:var(--ink)}
.ft-log-item-actions button.danger:hover{background:var(--danger-bg); border-color:var(--danger); color:var(--danger)}

/* ============ EDITOR (in sidebar) ============ */

.ft-editor, .ft-bundle{
  border-top:2px solid var(--indigo);
  background:var(--paper);
  padding:12px 14px;
  display:flex; flex-direction:column; gap:9px;
  max-height:60%; overflow-y:auto;
  box-shadow:0 -4px 16px rgba(20,23,43,.06);
}
.ft-bundle{border-top-color:var(--ok)}

.ft-editor-header{
  display:flex; align-items:center; gap:8px;
  padding-bottom:6px; border-bottom:1px solid var(--line);
}
.ft-editor-mode{
  font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--indigo);
  padding:2px 7px; background:var(--frame-edit-bg); border-radius:3px;
}
.ft-bundle .ft-editor-mode{color:var(--ok); background:var(--frame-diff-bg)}
.ft-editor-section{
  flex:1; font-size:12px; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ft-editor-close{
  background:transparent; border:0; cursor:pointer;
  font-size:18px; line-height:1; color:var(--ink-mute);
  padding:2px 6px; border-radius:3px;
}
.ft-editor-close:hover{background:var(--line-soft); color:var(--ink)}

.ft-editor-field{display:flex; flex-direction:column; gap:3px}
.ft-field-label{
  font-size:10px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-mute);
}
.ft-old-text{
  font-size:11.5px; color:var(--ink-soft);
  background:var(--line-soft); padding:6px 8px; border-radius:4px;
  font-family:Georgia,serif; line-height:1.4;
  max-height:80px; overflow-y:auto;
}
.ft-editor textarea, .ft-bundle textarea{
  font:inherit; font-size:12.5px; line-height:1.5;
  padding:7px 9px; border:1px solid var(--line);
  border-radius:4px; resize:vertical;
  font-family:inherit;
  background:var(--paper); color:var(--ink);
}
.ft-bundle textarea{
  font-family:JetBrains Mono,ui-monospace,monospace; font-size:11.5px;
  background:#fafbff;
}
.ft-editor textarea:focus, .ft-bundle textarea:focus{
  outline:0; border-color:var(--indigo);
  box-shadow:0 0 0 2px rgba(91,91,214,.12);
}
.ft-editor input[type="text"]{
  font:inherit; font-size:12px; padding:5px 8px;
  border:1px solid var(--line); border-radius:4px;
}
.ft-editor input[type="text"]:focus{
  outline:0; border-color:var(--indigo);
  box-shadow:0 0 0 2px rgba(91,91,214,.12);
}

/* Rich text editor (contenteditable) */
.ft-rte-toolbar{
  display:flex; align-items:center; gap:2px;
  padding:3px 4px; margin-bottom:3px;
  background:var(--line-soft); border:1px solid var(--line);
  border-radius:4px 4px 0 0;
  border-bottom:0;
}
.ft-rte-btn{
  background:transparent; border:0; cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:600;
  padding:3px 8px; border-radius:3px;
  color:var(--ink-soft); line-height:1;
  min-width:26px;
}
.ft-rte-btn:hover{background:var(--paper); color:var(--indigo)}
.ft-rte-btn:active{background:rgba(91,91,214,.15)}
.ft-rte-hint{
  margin-left:auto; font-size:9.5px; font-weight:500;
  letter-spacing:.04em; color:var(--ok);
  text-transform:uppercase;
}
.ft-rte-editor{
  font:inherit; font-size:12.5px; line-height:1.5;
  padding:7px 9px; border:1px solid var(--line);
  border-radius:0 0 4px 4px;
  font-family:inherit;
  background:var(--paper); color:var(--ink);
  min-height:72px; max-height:200px;
  overflow-y:auto;
  word-break:break-word;
  cursor:text;
}
.ft-rte-editor:focus{
  outline:0; border-color:var(--indigo);
  box-shadow:0 0 0 2px rgba(91,91,214,.12);
}
.ft-rte-editor:empty::before{
  content:attr(data-placeholder);
  color:var(--ink-mute);
  pointer-events:none;
}
.ft-rte-editor a{color:var(--indigo); text-decoration:underline}

.ft-diff-preview{
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; background:var(--line-soft); border-radius:4px;
  font-size:11.5px;
}
.ft-diff-old{color:var(--danger); text-decoration:line-through; flex:1; word-break:break-word}
.ft-diff-arrow{color:var(--ink-mute)}
.ft-diff-new{color:var(--ok); font-weight:500; flex:1; word-break:break-word}

.ft-editor-actions{
  display:flex; gap:6px; padding-top:4px;
}
.ft-editor-actions button{flex:1; justify-content:center}

.ft-format-warn{
  font-size:10.5px; line-height:1.4; color:var(--warn);
  background:var(--frame-annotate-bg);
  padding:5px 8px; border-radius:4px;
  border-left:2px solid var(--warn);
}

/* ============ CHAT PANEL ============ */

.ft-chat{
  border-top:2px solid var(--ok);
  background:var(--paper);
  display:flex; flex-direction:column;
  max-height:65%; overflow:hidden;
  box-shadow:0 -4px 16px rgba(20,23,43,.06);
}
.ft-chat .ft-editor-header{padding:10px 14px}
.ft-chat-action{
  background:transparent; border:0; cursor:pointer;
  font-size:11px; color:var(--ink-mute);
  padding:2px 6px; border-radius:3px;
}
.ft-chat-action:hover{background:var(--line-soft); color:var(--ink)}

.ft-chat-messages{
  flex:1; overflow-y:auto;
  padding:10px 14px;
  display:flex; flex-direction:column; gap:10px;
  min-height:140px;
}
.ft-chat-empty{
  text-align:center; color:var(--ink-mute); font-size:11.5px;
  padding:18px 8px; line-height:1.5;
}

.ft-chat-msg{
  display:flex; flex-direction:column; gap:3px;
}
.ft-chat-msg-head{
  display:flex; align-items:center; gap:6px;
  font-size:10px; color:var(--ink-mute);
}
.ft-chat-msg-role{
  font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.ft-chat-msg.user .ft-chat-msg-role{color:var(--indigo)}
.ft-chat-msg.assistant .ft-chat-msg-role{color:var(--ok)}
.ft-chat-msg.system .ft-chat-msg-role{color:var(--warn)}
.ft-chat-msg-time{
  font-family:JetBrains Mono,monospace; font-size:9.5px;
}
.ft-chat-msg-body{
  font-size:12px; line-height:1.55;
  padding:8px 11px; border-radius:6px;
  word-wrap:break-word; white-space:pre-wrap;
}
.ft-chat-msg.user .ft-chat-msg-body{
  background:var(--frame-edit-bg); color:var(--ink);
  border-left:2px solid var(--indigo);
}
.ft-chat-msg.assistant .ft-chat-msg-body{
  background:#f6fbf9; color:var(--ink);
  border-left:2px solid var(--ok);
}
.ft-chat-msg.system .ft-chat-msg-body{
  background:var(--frame-annotate-bg); color:var(--ink-soft);
  border-left:2px solid var(--warn); font-style:italic;
}
.ft-chat-msg-body code{
  font-family:JetBrains Mono,monospace; font-size:11px;
  background:rgba(0,0,0,.06); padding:1px 4px; border-radius:2px;
}
.ft-chat-msg-body pre{
  background:#1a1a2e; color:#e0e0f0;
  padding:8px 10px; border-radius:4px;
  font-size:11px; overflow-x:auto; margin:5px 0;
}
.ft-chat-msg.error .ft-chat-msg-body{
  background:var(--danger-bg); color:var(--danger);
  border-left-color:var(--danger);
}
.ft-chat-msg.thinking .ft-chat-msg-body{
  color:var(--ink-mute); font-style:italic;
}
.ft-chat-msg.thinking .ft-chat-msg-body::after{
  content:''; display:inline-block;
  width:10px; height:10px; border:1.5px solid var(--ink-mute);
  border-top-color:transparent; border-radius:50%;
  margin-left:6px; vertical-align:middle;
  animation:ft-spin 1s linear infinite;
}
@keyframes ft-spin{ to{ transform:rotate(360deg) } }

.ft-chat-input-area{
  border-top:1px solid var(--line);
  padding:8px 12px;
  display:flex; flex-direction:column; gap:6px;
}
.ft-chat-input-area textarea{
  font:inherit; font-size:12px; line-height:1.5;
  padding:7px 9px; border:1px solid var(--line);
  border-radius:4px; resize:vertical;
  font-family:inherit;
  background:var(--paper); color:var(--ink);
  min-height:50px;
}
.ft-chat-input-area textarea:focus{
  outline:0; border-color:var(--indigo);
  box-shadow:0 0 0 2px rgba(91,91,214,.12);
}
.ft-chat-actions{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.ft-chat-hint{
  font-size:10.5px; color:var(--ink-mute);
  font-family:JetBrains Mono,monospace;
}
.ft-chat-actions .ft-primary-btn:disabled{opacity:.45; cursor:not-allowed}

/* ============ SETTINGS MODAL ============ */

.ft-modal-overlay{
  position:fixed; inset:0;
  background:rgba(20,23,43,.55);
  display:flex; align-items:center; justify-content:center;
  z-index:1000;
  padding:20px;
}
.ft-modal{
  background:var(--paper); border-radius:8px;
  max-width:580px; width:100%; max-height:90vh;
  overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.4);
  display:flex; flex-direction:column;
}
.ft-modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
}
.ft-modal-header h3{
  font-family:Sora,sans-serif; font-size:15px; font-weight:600;
}
.ft-modal-body{
  padding:16px 18px; overflow-y:auto;
  flex:1;
}
.ft-modal-footer{
  padding:12px 18px;
  border-top:1px solid var(--line);
  display:flex; gap:8px; justify-content:flex-end;
}

.ft-settings-tabs{
  display:flex; gap:6px; margin-bottom:14px;
  border-bottom:1px solid var(--line);
}
.ft-settings-tab{
  flex:1;
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  padding:9px 12px;
  background:transparent; border:0; border-bottom:2px solid transparent;
  cursor:pointer; font:inherit;
  transition:all .15s;
}
.ft-settings-tab .ft-tab-icon{font-size:14px}
.ft-settings-tab{
  font-size:12.5px; font-weight:600; color:var(--ink-mute);
}
.ft-settings-tab .ft-tab-status{
  font-size:10px; font-weight:500; color:var(--ink-mute);
  font-family:JetBrains Mono,monospace;
}
.ft-settings-tab.active{
  color:var(--indigo); border-bottom-color:var(--indigo);
}
.ft-settings-tab.active .ft-tab-status{color:var(--ok)}
.ft-settings-tab.configured .ft-tab-status::before{content:'✓ '}

.ft-settings-panel{display:none}
.ft-settings-panel.active{display:block}
.ft-settings-help{
  font-size:11.5px; line-height:1.55; color:var(--ink-soft);
  background:var(--line-soft); padding:8px 11px; border-radius:4px;
  margin-bottom:12px;
}
.ft-settings-help a{color:var(--indigo); text-decoration:underline}
.ft-settings-help code{
  font-family:JetBrains Mono,monospace; font-size:10.5px;
  background:#fff; padding:1px 4px; border-radius:2px;
}
.ft-key-row{
  display:flex; gap:6px;
}
.ft-key-row input{flex:1}
.ft-key-row button{flex:none; padding:5px 10px}

.ft-settings-active{
  margin-top:18px; padding-top:14px;
  border-top:1px solid var(--line);
}
.ft-test-result{
  font-size:11.5px; margin-left:8px;
  font-family:JetBrains Mono,monospace;
}
.ft-test-result.ok{color:var(--ok)}
.ft-test-result.err{color:var(--danger)}

/* ============ STATUS BAR ============ */

.ft-statusbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:5px 16px; background:var(--paper);
  border-top:1px solid var(--line);
  font-size:11.5px; color:var(--ink-mute);
  font-family:JetBrains Mono,ui-monospace,monospace;
}
.ft-status-right{color:var(--ink-soft)}
.ft-status-privacy{
  color:var(--ok); font-size:10.5px;
  padding:1px 8px; border:1px solid var(--ok);
  border-radius:3px; opacity:.85;
}

/* ============ HOVER FRAMES INSIDE IFRAME ============ */
/* These styles are injected into the iframe by tool.js, not loaded here. */

/* ============ RESPONSIVE ============ */

@media (max-width: 980px){
  .ft-main{grid-template-columns:1fr; grid-template-rows:1fr auto}
  .ft-sidebar{max-height:50vh; border-left:0; border-top:1px solid var(--line)}
  .ft-toolbar{gap:10px}
  .ft-toolbar-group{padding-right:10px}
}

@media print{
  .ft-toolbar, .ft-sidebar, .ft-statusbar{display:none}
  .ft-main{grid-template-columns:1fr}
  .ft-doc-area{padding:0; overflow:visible}
  .ft-doc-frame{box-shadow:none; border-radius:0; min-height:0; height:auto}
}