/* ai-plus.css: the controls ai-plus.js adds to the website's chat and to the app's TaniX AI chat (founder 2026-11-15).
   Its own class names (aip-), dark like both windows, square corners like the rest of the app. Nothing here moves
   by itself. */
.aip-tools { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.aip-tool { width: 32px; height: 32px; display: inline-grid; place-items: center; padding: 0; border: 1px solid transparent; background: none; color: inherit; opacity: 0.85; cursor: pointer; border-radius: 0; flex-shrink: 0; }
.aip-tool:hover, .aip-tool:focus-visible { opacity: 1; border-color: rgba(255, 255, 255, 0.28); }
.aip-tool.on { color: #ffd60a; opacity: 1; }
.aip-app .aip-tool { color: #9fb4d8; } .aip-app .aip-tool:hover { color: #fff; } .aip-app .aip-tool.on { color: #ffd60a; }
.aip-mini { width: 34px; height: 38px; display: inline-grid; place-items: center; padding: 0; border: 0; background: none; color: #8fa3c8; cursor: pointer; flex-shrink: 0; }
.aip-mini:hover { color: #fff; } .aip-mini.on { color: #ffd60a; }
.aip-website .aip-mini { color: var(--text-muted, #8fa3c8); align-self: center; }

/* under an answer */
.aip-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.aip-act { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font: inherit; font-size: 0.8rem; font-weight: 600; line-height: 1.2; color: #dbe8ff; text-decoration: none; cursor: pointer;
  background: rgba(79, 200, 255, 0.1); border: 1px solid rgba(79, 200, 255, 0.4); border-radius: 0; }
.aip-act:hover { border-color: #4fc8ff; color: #fff; background: rgba(79, 200, 255, 0.18); }
.aip-act svg { width: 14px; height: 14px; }
.aip-where { background: none; border-color: rgba(255, 255, 255, 0.22); color: #9fb4d8; }
.aip-votes { display: flex; gap: 2px; margin-top: 4px; }
.aip-vote { width: 26px; height: 24px; display: inline-grid; place-items: center; padding: 0; border: 0; background: none; color: #6f82a8; cursor: pointer; }
.aip-vote:hover:not(:disabled) { color: #fff; } .aip-vote.on { color: #ffd60a; } .aip-vote:disabled { cursor: default; }
.aip-vote svg { width: 14px; height: 14px; }

/* the line under the text box */
.aip-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 12px 8px; flex-shrink: 0; font-size: 0.78rem; }
.aip-app .aip-bar { background: #0b1832; }
.aip-human { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; color: #4fc8ff; }
.aip-human:hover { color: #fff; }
.aip-website .aip-human { color: var(--accent-2, #4fc8ff); }
.aip-key { padding: 2px 6px; border: 1px solid rgba(255, 255, 255, 0.18); color: #6f82a8; font-size: 0.68rem; font-weight: 700; white-space: nowrap; }
@media (hover: none) { .aip-key { display: none; } }
.aip-pic { display: flex; align-items: center; gap: 10px; margin: 0 10px; padding: 6px 8px; background: rgba(79, 200, 255, 0.1); border: 1px solid rgba(79, 200, 255, 0.3); font-size: 0.8rem; color: #dbe8ff; flex-shrink: 0; }
.aip-pic[hidden] { display: none; }
.aip-pic img { width: 38px; height: 38px; object-fit: cover; }
.aip-pic span { flex: 1; min-width: 0; }

/* the second screen */
.aip-sheet { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; background: #081226; color: #eaf2ff; }
.aip-sheet-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); background: #0b1832; flex-shrink: 0; }
.aip-sheet-head strong { font-size: 1rem; color: #fff; }
.aip-sheet .aip-tool { color: #9fb4d8; }
.aip-sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.aip-row { display: flex; align-items: center; gap: 6px; padding: 2px 4px 2px 2px; background: rgba(255, 255, 255, 0.04); border: 1px solid transparent; }
.aip-row.on { border-color: rgba(79, 200, 255, 0.55); }
button.aip-row.aip-new { padding: 11px 12px; gap: 8px; cursor: pointer; font: inherit; font-weight: 700; color: #ffd60a; text-align: left; }
.aip-open { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border: 0; background: none; cursor: pointer; font: inherit; color: #eaf2ff; text-align: left; }
.aip-t { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.aip-open small { color: #6f82a8; font-size: 0.72rem; }
.aip-note { margin: 2px 2px 6px; color: #9fb4d8; font-size: 0.86rem; line-height: 1.5; }
.aip-done { margin: 10px 2px; color: #b8f5d0; font-weight: 600; line-height: 1.5; }
.aip-form { display: flex; flex-direction: column; gap: 9px; }
.aip-form input, .aip-form textarea { width: 100%; box-sizing: border-box; padding: 11px 12px; font: inherit; font-size: 16px; color: #fff; background: #050c1c; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 0; resize: none; }
.aip-form input:focus, .aip-form textarea:focus { outline: none; border-color: #38b6ff; }
.aip-send { padding: 11px 14px; font: inherit; font-weight: 700; color: #06122e; background: #ffd60a; border: 0; border-radius: 0; cursor: pointer; }
.aip-send:disabled { opacity: 0.6; cursor: default; }
.aip-status { margin: 0; min-height: 1.3em; font-size: 0.82rem; color: #9fb4d8; }
.aip-status.err { color: #ffb4b4; }

/* nudges */
.aip-nudge { position: fixed; z-index: 1200; max-width: min(300px, calc(100vw - 24px)); display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 13px; font: inherit; font-size: 0.86rem; font-weight: 600; line-height: 1.35; text-align: left;
  color: #eaf2ff; background: #10203f; border: 1px solid rgba(79, 200, 255, 0.5); border-radius: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); cursor: pointer; }
.aip-nudge:hover { border-color: #4fc8ff; }
.aip-nudge-x { display: inline-grid; place-items: center; width: 22px; height: 22px; color: #9fb4d8; flex-shrink: 0; }
.aip-nudge-x:hover { color: #fff; }
.aip-nudge-corner { right: 24px; bottom: 96px; }
.aip-has-nudge { outline: 2px solid #ffd60a; outline-offset: 2px; }

/* show me where */
.aip-spot { position: fixed; z-index: 3000; pointer-events: none; box-shadow: 0 0 0 9999px rgba(2, 7, 22, 0.68), 0 0 0 2px #4fc8ff, 0 0 22px rgba(79, 200, 255, 0.6); }
.aip-tip { position: fixed; z-index: 3001; box-sizing: border-box; padding: 13px 14px; background: #10203f; color: #eaf2ff; border: 1px solid rgba(79, 200, 255, 0.5); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); }
.aip-tip p { margin: 0 0 10px; font-size: 0.92rem; font-weight: 600; line-height: 1.45; }
.aip-tip .aip-send { padding: 7px 14px; font-size: 0.85rem; }

/* the website's chat: its header is a blue bar with white controls */
.aip-website .chat-header .aip-tools { color: #fff; margin-left: auto; }
.aip-website .chat-stack { min-width: 0; }
.aip-website.chat-panel { overflow: hidden; }
.aip-website .aip-bar { border-top: 1px solid var(--border, rgba(255, 255, 255, 0.1)); }

/* the website's own rule makes every button in its text box a round blue one: ours stay plain */
.aip-website .chat-input .aip-mini { width: 34px; height: 38px; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--text-muted, #8fa3c8); flex: 0 0 auto; }
.aip-website .chat-input .aip-mini:hover { color: var(--text, #fff); background: none; }
.aip-website .chat-input .aip-mini.on { color: #ffd60a; }
.aip-acts[hidden] { display: none; }

/* "Test my key now" and what it found (2026-11-15) */
.aip-do { border-color: rgba(255, 214, 10, 0.55); color: #ffe9a3; background: rgba(255, 214, 10, 0.08); }
.aip-do:disabled { opacity: 0.7; cursor: default; }
.aip-result { margin: 6px 0 0; font-size: 0.82rem; font-weight: 600; color: #ffb4b4; }
.aip-result.ok { color: #b8f5d0; }

/* recording a spoken question (browsers with no speech recognition), and step two of "Show me where" (2026-11-15) */
.aip-mini.busy { opacity: 0.5; cursor: default; }
.aip-tip .aip-open-it { display: inline-block; text-decoration: none; margin-right: 8px; }
.aip-tip .aip-later { width: auto; height: auto; padding: 7px 10px; font: inherit; font-size: 0.82rem; font-weight: 600; color: #9fb4d8; }