/* ============================================================================
 * ask-indie.css — Ask Indie panel (II-78)
 *
 * The panel is created by ask-indie.js and appended to <body> (OUTSIDE the page
 * wrapper), so the per-page CSS custom properties do not cascade to it. All
 * colours are therefore literal hex (the approved light palette) with explicit
 * `.ii-dark` overrides for the portal dark theme. Values reproduced from
 * II-78-Ask-Indie-Panel-v1.1.html (.aip / .aip-* / .pchip / bubbles / disclaimer).
 * ==========================================================================*/

.aip{
  position:fixed; top:64px; right:16px; bottom:16px; z-index:80;
  width:min(448px, calc(100vw - 32px));
  background:#fff; border:1px solid #E7E1D6; border-radius:14px;
  box-shadow:0 18px 48px rgba(28,20,17,.16);
  display:flex; flex-direction:column; overflow:hidden;
  font-family:'Lato',sans-serif;
}
body.admin-bar .aip{ top:96px; }
.aip.shut{ display:none; }

.aip-head{ padding:15px 18px 13px; border-bottom:1px solid #E7E1D6; background:#FBF9F5; border-radius:14px 14px 0 0; }
.aip-top{ display:flex; align-items:center; gap:11px; }
.aip-mark{ width:32px; height:32px; border-radius:9px; background:#9A5327; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.aip-mark svg{ width:17px; height:17px; fill:none; stroke:#fff; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.aip-name{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:16px; color:#171717; line-height:1.15; }
.aip-role{ font-size:13px; color:#1C1411; }
.aip-x{ margin-left:auto; background:none; border:none; color:#1C1411; font-size:19px; line-height:1; padding:2px 4px; cursor:pointer; }
.aip-x:hover{ color:#171717; }
.aip-scope{ margin-top:11px; font-size:13px; color:#9A5327; background:#FCF3EE; border:1px solid #F7DFD2; border-radius:7px; padding:6px 9px; display:flex; gap:7px; align-items:flex-start; }
.aip-scope b{ font-family:'Montserrat',sans-serif; font-weight:700; }

.aip-body{ flex:1; overflow-y:auto; padding:18px; }

.aihi{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:19px; color:#171717; margin-bottom:4px; }
.aihi-s{ font-size:13px; color:#1C1411; line-height:1.55; margin-bottom:16px; }
.plabel{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:13px; letter-spacing:.13em; text-transform:uppercase; color:#1C1411; margin:0 0 8px; }
.pchip{ display:block; width:100%; text-align:left; background:#fff; border:1px solid #E7E1D6; border-radius:10px; padding:10px 13px; font-size:13px; color:#171717; margin-bottom:7px; line-height:1.4; cursor:pointer; font-family:'Lato',sans-serif; }
.pchip:hover{ border-color:#DE804D; background:#FCF3EE; }
.pchip .pk{ display:block; font-family:'Montserrat',sans-serif; font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:#DE804D; margin-bottom:3px; }

.qbub{ background:#9A5327; color:#fff; border-radius:14px 14px 5px 14px; padding:10px 14px; font-size:13.5px; line-height:1.5; margin:0 0 14px auto; max-width:86%; width:fit-content; }
.abub{ font-size:13.5px; color:#333; line-height:1.6; margin:0 0 16px; }
.abub p{ margin:0 0 10px; }
.abub p:last-child{ margin-bottom:0; }
.abub b{ font-family:'Montserrat',sans-serif; font-weight:700; color:#171717; }

/* typing indicator while the seam resolves */
.ai-typing{ display:flex; gap:5px; align-items:center; }
.ai-typing span{ width:7px; height:7px; border-radius:50%; background:#c6bdb2; animation:ii-aip-blink 1.1s infinite ease-in-out; }
.ai-typing span:nth-child(2){ animation-delay:.18s; }
.ai-typing span:nth-child(3){ animation-delay:.36s; }
@keyframes ii-aip-blink{ 0%,80%,100%{ opacity:.35; transform:translateY(0); } 40%{ opacity:1; transform:translateY(-2px); } }
@media(prefers-reduced-motion:reduce){ .ai-typing span{ animation:none; } }

.threadfoot{ display:flex; gap:14px; align-items:center; margin-top:18px; padding-top:14px; border-top:1px solid #E7E1D6; }
.threadfoot button{ background:none; border:none; padding:0; color:#9A5327; font-family:'Montserrat',sans-serif; font-weight:700; font-size:13px; cursor:pointer; }
.threadfoot button:hover{ text-decoration:underline; }

.aip-foot{ border-top:1px solid #E7E1D6; padding:14px 16px 12px; background:#FBF9F5; }
.aip-input{ display:flex; gap:10px; align-items:flex-end; background:#fff; border:2px solid #9A5327; border-radius:14px; padding:9px 9px 9px 15px; box-shadow:0 2px 8px rgba(28,20,17,.06); }
.aip-input:focus-within{ border-color:#7d411c; box-shadow:0 0 0 3px #F7DFD2; }
.aip-input textarea{ flex:1; min-width:0; border:none; background:none; padding:6px 0; font-size:15px; font-family:'Lato',sans-serif; color:#171717; resize:none; line-height:1.45; height:46px; }
.aip-input textarea:focus{ outline:none; }
.aip-input textarea::placeholder{ color:#1C1411; font-size:14.5px; }
.aip-send{ width:42px; height:42px; flex:0 0 auto; border-radius:12px; background:#9A5327; border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.aip-send:hover{ background:#7d411c; }
.aip-send svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
.aip-disc{ font-size:13px; line-height:1.45; color:#1C1411; margin-top:10px; text-align:center; }
.aip-disc b{ color:#171717; font-family:'Montserrat',sans-serif; font-weight:700; }

/* ---- guided-tours placeholder toast (gTour) ---- */
.ii-toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px);
  z-index:1200; background:#1C1411; color:#F3ECE4;
  font-family:'Lato',sans-serif; font-size:13.5px; padding:11px 18px; border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.28); opacity:0; transition:opacity .28s ease, transform .28s ease;
  pointer-events:none;
}
.ii-toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---- dark mode ---- */
.ii-dark .aip{ background:#191510; border-color:#332D26; }
.ii-dark .aip-head,
.ii-dark .aip-foot{ background:#14100D; border-color:#332D26; }
.ii-dark .aip-name{ color:#F7F2EC; }
.ii-dark .aip-role,
.ii-dark .plabel,
.ii-dark .aip-x{ color:#A69D93; }
.ii-dark .aip-scope{ background:#2A211A; border-color:#33261A; color:#E0A379; }
.ii-dark .aihi{ color:#F7F2EC; }
.ii-dark .aihi-s{ color:#C9C0B6; }
.ii-dark .pchip{ background:#14100D; border-color:#332D26; color:#E9E3DB; }
.ii-dark .pchip:hover{ border-color:#D08A56; background:#2A211A; }
.ii-dark .pchip .pk{ color:#D08A56; }
.ii-dark .qbub{ background:#8A5A3A; }
.ii-dark .abub{ color:#DAD3CA; }
.ii-dark .abub b{ color:#F7F2EC; }
.ii-dark .threadfoot{ border-color:#332D26; }
.ii-dark .threadfoot button{ color:#D08A56; }
.ii-dark .aip-mark,
.ii-dark .aip-send{ background:#B4703E; }
.ii-dark .aip-input{ background:#191510; border-color:#B4703E; }
.ii-dark .aip-input textarea{ color:#E9E3DB; }
.ii-dark .aip-disc{ color:#A69D93; }
.ii-dark .aip-disc b{ color:#F7F2EC; }

/* ---- small screens: fill the width, tuck under the (wrapped) topbar ---- */
@media(max-width:520px){
  .aip{ top:auto; right:8px; left:8px; bottom:8px; width:auto; max-height:82vh; }
}