/* ask-mac.css - the ? menu and the "Ask Mac" chat (script/ask-mac.js).
   Self-contained: dark at every theme (Calibrate included). Layers sit above
   the page and header menus (10006) and below pop-ups and toasts (10040+). */

/* ---------- The ? menu ---------- */
.am-menu { display:none; position:fixed; z-index:10007; width:300px; max-width:calc(100vw - 16px); background:#171614; color:#f3efe7;
  border:1px solid #33312c; border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.6); padding:8px; font:14px/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif; }
.am-menu.open { display:block; }
.am-menu * { box-sizing:border-box; }
.am-menu-line { padding:8px 10px 10px; color:#cfc7b6; border-bottom:1px solid #2a2824; margin-bottom:6px; font-size:13.5px; }
.am-menu-k { display:block; color:#ffbf00; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:3px; }
.am-menu-item { box-sizing:border-box; margin:0; display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:none; border:0; color:#f3efe7 !important; text-decoration:none;
  padding:9px 10px; border-radius:8px; cursor:pointer; font:inherit; }
.am-menu-item:hover, .am-menu-item:focus-visible { background:#26241f; outline:none; }   /* focus-visible: the item focused on opening isn't lit up for mouse users */
.am-menu-item b { display:block; font-weight:700; }
.am-menu-item small { display:block; color:#8f897d; font-size:12px; }
.am-ico { width:34px; height:34px; flex-shrink:0; border-radius:50%; background:#2a2824; color:#ffbf00; display:flex; align-items:center; justify-content:center; font-size:18px; }
.am-ico-mac { width:34px; height:34px; flex-shrink:0; border-radius:50%; object-fit:cover; object-position:50% 12%; background:#2a2824; }

/* ---------- The chat panel ---------- */
.am-panel { display:none; position:fixed; z-index:10020; right:16px; bottom:16px; width:370px; max-width:calc(100vw - 32px);
  height:min(580px, calc(100vh - var(--header-height, 60px) - 60px)); height:min(580px, calc(100dvh - var(--header-height, 60px) - 60px));
  flex-direction:column; background:#141310; color:#efe9dd; border:1px solid #3a352d; border-radius:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.65); font:14px/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif; }
.am-panel.open { display:flex; }
.am-panel * { box-sizing:border-box; }
.am-head { position:relative; display:flex; align-items:center; gap:6px; padding:12px 10px 12px 104px; min-height:62px;
  background:linear-gradient(180deg, #221f19, #181611); border-bottom:1px solid #2c2822; border-radius:16px 16px 0 0; }
.am-macimg { position:absolute; left:6px; bottom:0; height:100px; width:auto; pointer-events:none; filter:drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.am-title { flex:1; min-width:0; }
.am-title b { display:block; color:#ffbf00; font-size:16px; }
.am-title small { display:block; color:#8f897d; font-size:12px; }
.am-hbtn { background:none; border:0; color:#a39e94; font-size:22px; line-height:1; width:34px; height:34px; border-radius:8px; cursor:pointer; }
.am-hbtn:hover { background:#2a2824; color:#fff; }

.am-list { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:12px 12px 10px; display:flex; flex-direction:column; gap:10px; }
.am-msg { max-width:92%; padding:9px 12px; border-radius:12px; word-wrap:break-word; }
.am-msg p { margin:0 0 8px; } .am-msg p:last-child { margin-bottom:0; }
.am-msg ul, .am-msg ol { margin:4px 0 8px; padding-left:20px; } .am-msg li { margin:3px 0; }
.am-msg h2, .am-msg h3 { font-size:14px; margin:6px 0; color:#fff; }
.am-msg a { color:#ffbf00; }
.am-msg strong, .am-msg b { color:#fff; }
.am-msg.am-w-mac { align-self:flex-start; background:#1f1c17; border:1px solid #2f2a22; border-top-left-radius:4px; }
.am-msg.am-w-me { align-self:flex-end; background:#ffbf00; color:#1a1a1a; border-top-right-radius:4px; }
/* Guide marks used in the written answers (help_lib.php) */
.am-msg .hg-page { color:#ffbf00; font-weight:700; text-decoration:none; }
.am-msg .hg-me { color:#ffbf00; }
.am-msg .ui { display:inline-block; border-radius:999px; padding:1px 9px; font-size:12px; line-height:1.4; white-space:nowrap; vertical-align:middle; }
.am-msg .ui-ni { color:#999; border:1px solid #999; background:#fff; }
.am-msg .ui-wl { color:#2e7d32; border:1px solid #2e7d32; background:#fff; }
.am-msg .ui-blue { background:#007bff; color:#fff; border-radius:4px; }
.am-msg .ui-yellow { background:#ffbf00; color:#1a1a1a; font-weight:700; }
.am-msg .ui-dark { background:#242424; color:#fff; border:1px solid #999; border-radius:8px; }
.am-msg .ui-stars { color:#ffbf00; letter-spacing:1px; white-space:nowrap; } .am-msg .ui-stars span { color:#555; }
.am-msg .ui-check { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.am-msg .ui-check .box { display:inline-flex; align-items:center; justify-content:center; width:12px; height:12px; border-radius:3px; background:#4caf50; color:#fff; font-size:9px; }
.am-msg .hg-shot, .am-msg .hg-tip, .am-msg .hg-clap { display:none; }   /* no pictures in the chat */
.am-guide { font-size:13px; font-weight:700; }
.am-after { font-size:13px; color:#a39e94; }

.am-chip-h { color:#8f897d; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin:8px 0 6px; }
.am-chips { display:flex; flex-direction:column; gap:6px; }
.am-chip { text-align:left; background:#141310; color:#f3efe7; border:1px solid #4a3d16; border-radius:10px; padding:7px 10px; font:inherit; font-size:13.5px; cursor:pointer; }
.am-chip:hover { border-color:#ffbf00; color:#ffbf00; }
.am-chip-next { border-color:#ffbf00; background:#2a2210; font-weight:700; }   /* "What should I do next?" */
.am-opts { margin-top:8px; }                                                  /* Mac's follow-up answers */
.am-opt { border-color:#3a3833; }
.am-more summary { cursor:pointer; color:#ffbf00; font-weight:700; font-size:13px; margin-top:8px; }
.am-link { background:none; border:0; padding:0; color:#ffbf00; font:inherit; text-decoration:underline; cursor:pointer; }
.am-btn { background:#ffbf00; color:#1a1a1a; border:0; border-radius:999px; padding:8px 18px; font-weight:700; font:inherit; font-weight:700; cursor:pointer; }
.am-btn:disabled { opacity:.6; cursor:default; }
.am-row { display:flex; align-items:center; gap:14px; margin-top:8px; flex-wrap:wrap; }
.am-report textarea, .am-report input, .am-end textarea { width:100%; background:#0e0d0b; color:#f3efe7; border:1px solid #3a352d; border-radius:8px; padding:8px; font:inherit; margin-top:6px; resize:vertical; }

.am-typing { display:flex; gap:4px; padding:12px 14px; }
.am-typing span { width:6px; height:6px; border-radius:50%; background:#8f897d; animation:amDot 1s infinite; }
.am-typing span:nth-child(2) { animation-delay:.15s; } .am-typing span:nth-child(3) { animation-delay:.3s; }
@keyframes amDot { 0%, 80%, 100% { opacity:.3; } 40% { opacity:1; } }

.am-end { background:#1f1c17; border:1px solid #4a3d16; border-radius:12px; padding:12px; }
.am-end p { margin:0 0 8px; }
.am-thumbs { display:flex; gap:10px; margin-bottom:6px; }
.am-thumb { font-size:22px; width:52px; height:44px; border-radius:10px; background:#141310; border:1px solid #3a352d; cursor:pointer; }
.am-thumb.on, .am-thumb:hover { border-color:#ffbf00; background:#2a2416; }
.am-end-status { color:#a39e94; font-size:13px; min-height:1em; margin:6px 0 0 !important; }

/* The site-wide form style (moviematch.css: white box, padding, shadow, and
   full-width red-hover buttons) must not reach the chat's own forms. */
.am-panel form { background:none !important; box-shadow:none !important; max-width:none !important; margin:0 !important; border-radius:0 !important; }
.am-panel form button { width:auto !important; transition:none; }
.am-panel .am-report { padding:0 !important; }
.am-panel .am-report .am-btn, .am-panel .am-report .am-btn:hover { background:#ffbf00 !important; color:#1a1a1a !important; padding:8px 18px !important; border-radius:999px !important; font-size:14px !important; }
.am-panel .am-report .am-link { background:none !important; color:#ffbf00 !important; padding:0 !important; font-size:14px !important; }

/* Where the member types: a dark grey band, a white box across 95% of it */
.am-panel form.am-form { display:flex; align-items:flex-end; gap:8px; padding:12px 2.5% 8px !important; background:#24221e !important; border-top:1px solid #34312b; }
.am-input { flex:1; min-width:0; box-sizing:border-box; min-height:46px; max-height:132px; resize:none; overflow-y:auto; display:block;
  background:#fff; color:#1a1a1a; border:1px solid #d8d2c4; border-radius:14px; padding:12px 14px; font:inherit; font-size:16px; line-height:1.35; }
.am-input::placeholder { color:#8f897d; }
.am-input:focus { outline:none; border-color:#ffbf00; box-shadow:0 0 0 2px rgba(255,191,0,.35); }
.am-panel form.am-form button.am-send { width:46px !important; height:46px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:0 !important;
  border-radius:50% !important; border:0; background:#ffbf00 !important; color:#1a1a1a !important; cursor:pointer; }
.am-panel form.am-form button.am-send:hover { background:#ffcf40 !important; }
.am-send svg { display:block; width:26px; height:26px; }
.am-foot { display:flex; flex-wrap:wrap; gap:4px 14px; padding:2px 2.5% 10px; background:#24221e; border-radius:0 0 16px 16px; }
.am-foot button { background:none; border:0; padding:2px 0; color:#a39e94; font:inherit; font-size:12.5px; cursor:pointer; text-decoration:underline; }
.am-foot button:hover { color:#ffbf00; }

/* Minimised: Mac waits in the corner */
.am-bubble { display:none; position:fixed; z-index:10020; right:16px; bottom:16px; width:62px; height:62px; border-radius:50%; padding:0; cursor:pointer;
  background:#1f1c17; border:2px solid #ffbf00; box-shadow:0 8px 24px rgba(0,0,0,.55); overflow:hidden; }
.am-bubble.show { display:block; }
.am-bubble img { width:100%; height:100%; object-fit:cover; object-position:50% 10%; }

/* Phones: the chat fills the width, as a sheet from the bottom */
@media (max-width: 600px) {
  .am-panel { left:0; right:0; bottom:0; width:auto; max-width:none; border-radius:16px 16px 0 0; border-bottom:0;
    height:min(86vh, calc(100vh - var(--header-height, 60px) - 24px)); height:min(86dvh, calc(100dvh - var(--header-height, 60px) - 24px)); }
  .am-head { padding-left:92px; }
  .am-macimg { height:88px; }
  .am-bubble { right:12px; bottom:12px; width:56px; height:56px; }
  html.am-chat-open, html.am-chat-open body { overflow:hidden; }
}

/* While the Page Guide tour is on, the chat steps aside */
html.mm-tour-on .am-panel, html.mm-tour-on .am-bubble, html.mm-tour-on .am-menu { display:none !important; }