/* ============================================================================
 * OGACE Assistant · "Diamond Mark" redesign · v3.8.0
 * ----------------------------------------------------------------------------
 * Self-contained, scoped to #ogace-assist (works on any theme). Same DOM/
 * class contract as before, plus one new opt-in element (.ogace-assist-max)
 * for the resize toggle — everything degrades gracefully if a theme strips it.
 *
 * WHY THIS LOOK: pulls its visual language straight from the OGACE diamond
 * mark instead of being "a dark chat widget that happens to use brand
 * colors" — angled HUD corner brackets on the panel, a rotating navy→indigo→
 * red conic ring behind the avatar (the diamond's four facets in motion),
 * and a 45°-rotated diamond send button instead of a generic rounded square.
 * Sizing is fluid (clamp()) with three real breakpoints plus an explicit
 * maximize/restore toggle, instead of one fixed box that only ever changes
 * shape once, at the mobile cutoff.
 * ========================================================================== */

#ogace-assist{
  /* Prefer the active theme's own colors when it defines them (WP block
     themes expose --wp--preset--color--*, many WooCommerce themes expose
     --wc-primary / --wc-secondary) — falls back to the OGACE logo palette
     on any theme that doesn't force its own. Sampled directly from the
     OGACE Tourism logo: navy #032ea1, indigo #221ab2, red #e00025. */
  --stone:      var(--wc-primary, var(--wp--preset--color--primary, #0A1440));
  --stone-lit:  #142866;
  --terracotta: var(--wc-secondary, var(--wp--preset--color--secondary, #E00025));
  --terracotta-lit: #FF3450;
  --gold:       #3B2FD9;
  --gold-soft:  #6A5FEA;
  --navy:       #032EA1;
  --jade:       #2EA88F;
  --bg:         #060B1E;
  --panel:      #0D1636;
  --panel2:     #121F44;
  --raise:      #17224C;
  --line:       rgba(59,47,217,.20);
  --line-lit:   rgba(59,47,217,.40);
  --tx:         #F2F6FF;
  --mut:        #AEB8DE;
  --dim:        #6D77A6;
  --mono:       ui-monospace, 'SF Mono', 'Space Mono', Menlo, Consolas, monospace;
  --serif:      var(--wp--preset--font-family--fraunces, 'Fraunces', Georgia, serif);
  --ui:         var(--wp--preset--font-family--body, var(--font-family-body, 'Inter', system-ui, -apple-system, sans-serif));
  position:fixed;right:20px;bottom:20px;z-index:99999;font-family:var(--ui)
}
#ogace-assist *{box-sizing:border-box}

/* Subtle carved-stone lattice texture — pure CSS, no image assets, low
   opacity so it reads as texture rather than pattern. Indigo-tinted to
   match the logo's navy/indigo mark. */
#ogace-assist{
  --lattice: repeating-linear-gradient(135deg, rgba(59,47,217,.06) 0 1px, transparent 1px 22px),
             repeating-linear-gradient(45deg, rgba(59,47,217,.06) 0 1px, transparent 1px 22px);
}

/* FAB */
.ogace-assist-fab{position:relative;display:inline-flex;align-items:center;gap:10px;border:none;cursor:pointer;
  padding:13px 20px;border-radius:999px;color:#fff;font-family:var(--ui);font-weight:700;font-size:14px;
  background:linear-gradient(115deg,var(--navy) 0%,var(--gold) 46%,var(--terracotta) 100%);
  box-shadow:0 10px 30px rgba(224,0,37,.30),0 2px 0 rgba(255,255,255,.22) inset;
  transition:transform .18s,box-shadow .18s}
.ogace-assist-fab:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(224,0,37,.42),0 2px 0 rgba(255,255,255,.28) inset}
.ogace-assist-fab:active{transform:translateY(0)}
.ogace-assist-fab__mk{font-family:var(--mono);font-size:17px;line-height:1}
.ogace-assist-fab__mk--logo{width:24px;height:24px;object-fit:contain;display:block;border-radius:7px;
  background:#fff;padding:2px;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 0 0 1px rgba(255,255,255,.5)}
@media(max-width:520px){.ogace-assist-fab__txt{display:none}.ogace-assist-fab{padding:15px}}

/* Panel — fluid sizing via clamp() instead of one fixed box; scales with
   the viewport at every width, not just below the mobile cutoff. */
.ogace-assist-panel{position:absolute;right:0;bottom:64px;
  width:clamp(340px, 34vw, 400px);
  max-width:calc(100vw - 32px);
  height:clamp(480px, 68vh, 600px);
  max-height:calc(100vh - 120px);
  background:var(--bg);background-image:var(--lattice);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;
  color:var(--tx);box-shadow:0 26px 70px rgba(0,0,0,.55),0 0 0 1px rgba(59,47,217,.10);
  /* Grows out of the "Ask OGACE" FAB in the bottom-right corner. */
  transform-origin:bottom right;will-change:transform,opacity;
  transition:opacity .20s ease, transform .26s cubic-bezier(.34,1.56,.64,1),
             width .28s ease, height .28s ease}

/* ── Pop-in / pop-out ────────────────────────────────────────────────────────
   Closed resting state (also the exit target): faded + slightly shrunk toward
   the FAB. The panel stays in the DOM through the close so this transition can
   actually play — JS only flips `hidden` after it finishes. The open state is
   driven by `.is-open` on the #ogace-assist root, set/cleared in the JS. */
.ogace-assist-panel{opacity:0;transform:translateY(10px) scale(.94)}
#ogace-assist.is-open .ogace-assist-panel{opacity:1;transform:none}

/* Maximize toggle (desktop only — the mobile breakpoint below already goes
   near-fullscreen, so a max button there would be redundant). */
.ogace-assist-max{display:none}
@media(min-width:641px){
  .ogace-assist-max{display:inline-flex}
  .ogace-assist-panel.is-max{
    width:min(560px, calc(100vw - 32px));
    height:min(84vh, calc(100vh - 64px));
  }
}

/* HUD corner brackets — the one detail borrowed straight from the diamond
   mark's angularity, so the panel reads as "OGACE" even with no logo in
   sight. Pure CSS, two pseudo-elements, no image assets. */
.ogace-assist-panel::before,
.ogace-assist-panel::after{
  content:'';position:absolute;top:10px;width:22px;height:22px;pointer-events:none;z-index:2;
  border-top:2px solid var(--terracotta);opacity:.55;
}
.ogace-assist-panel::before{left:10px;border-left:2px solid var(--navy)}
.ogace-assist-panel::after{right:10px;border-right:2px solid var(--navy)}

.ogace-assist-head{position:relative;display:flex;align-items:center;justify-content:space-between;padding:15px 17px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(120deg, rgba(3,46,161,.55) 0%, rgba(13,22,54,.85) 45%, rgba(224,0,37,.22) 100%)}
.ogace-assist-id{display:flex;align-items:center;gap:12px}

/* Avatar — a slow-rotating conic ring (navy → indigo → red → navy) glows
   behind the logo badge, echoing the diamond's four facets in motion
   instead of a static gradient square. */
.ogace-assist-av{position:relative;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  font-family:var(--mono);background:linear-gradient(135deg,var(--gold-soft),var(--terracotta));color:#20120a;
  font-size:17px;box-shadow:0 2px 0 rgba(255,255,255,.35) inset}
.ogace-assist-av--logo{background:#fff;object-fit:contain;padding:4px;z-index:1}
.ogace-assist-id{position:relative}
.ogace-assist-id::before{
  content:'';position:absolute;left:-5px;top:-5px;width:46px;height:46px;border-radius:14px;z-index:0;
  background:conic-gradient(from 0deg, var(--navy), var(--gold), var(--terracotta), var(--navy));
  filter:blur(3px);opacity:.55;animation:oga-ring-spin 7s linear infinite}
@keyframes oga-ring-spin{to{transform:rotate(360deg)}}

.ogace-assist-id strong{display:block;font-family:var(--serif);font-weight:600;font-size:15.5px;letter-spacing:.01em;color:var(--tx)}
.ogace-assist-prompt{font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.ogace-assist-agents{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;color:var(--mut);
  text-decoration:none}
.ogace-assist-agents:hover{color:var(--gold-soft)}
.ogace-assist-agents__dot{width:6px;height:6px;border-radius:50%;background:var(--jade);flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(46,168,143,.22);animation:oga-pulse 2.4s ease-in-out infinite}
@keyframes oga-pulse{0%,100%{box-shadow:0 0 0 3px rgba(46,168,143,.22)}50%{box-shadow:0 0 0 5px rgba(46,168,143,.06)}}
.ogace-assist-x{background:transparent;border:none;color:var(--mut);font-size:16px;cursor:pointer;padding:6px;
  border-radius:8px;transition:.15s}
.ogace-assist-x:hover{color:var(--tx);background:var(--raise)}

/* Log */
.ogace-assist-log{flex:1;overflow-y:auto;padding:17px;display:flex;flex-direction:column;gap:13px}
.ogace-assist-log::-webkit-scrollbar{width:8px}
.ogace-assist-log::-webkit-scrollbar-thumb{background:var(--line-lit);border-radius:8px}
.oga-msg{max-width:87%;font-size:13.5px;line-height:1.55;padding:12px 14px;border-radius:15px;
  animation:oga-in .22s ease-out}
@keyframes oga-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.oga-msg--bot{align-self:flex-start;background:var(--panel);
  border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  border-left:2.5px solid var(--gold);border-bottom-left-radius:4px}
.oga-msg--me{align-self:flex-end;background:linear-gradient(135deg,var(--terracotta),var(--terracotta-lit));
  color:#fff8ef;border-bottom-right-radius:4px}
.oga-msg--typing{display:flex;align-items:center;gap:4px;padding:14px 16px}

/* Typing indicator — three breathing dots instead of a static "…" */
.oga-dot{width:6px;height:6px;border-radius:50%;background:var(--gold-soft);opacity:.35;
  animation:oga-breathe 1.1s ease-in-out infinite}
.oga-dot:nth-child(2){animation-delay:.15s}
.oga-dot:nth-child(3){animation-delay:.3s}
@keyframes oga-breathe{0%,60%,100%{opacity:.35;transform:scale(.85)}30%{opacity:1;transform:scale(1)}}

.oga-src{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.oga-src a{font-size:12.5px;color:var(--gold-soft);background:var(--raise);border:1px solid var(--line);
  padding:9px 11px;border-radius:10px;text-decoration:none;display:flex;gap:8px;align-items:center;transition:.15s}
.oga-src a::before{content:"◇";color:var(--jade);flex:0 0 auto}
.oga-src a:hover{border-color:var(--gold);background:var(--panel2);color:var(--tx)}
.oga-book{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.oga-book a{font-size:12.5px;font-weight:700;padding:9px 14px;border-radius:999px;text-decoration:none;color:#fff;
  transition:filter .15s}
.oga-book a:hover{filter:brightness(1.08)}
.oga-book .wa{background:#25d366;color:#04310f}
.oga-book .tg{background:#229ed9}

/* Chips */
.ogace-assist-chips{display:flex;gap:8px;flex-wrap:wrap;padding:0 17px 13px}
.ogace-assist-chips button{font-size:12px;color:var(--mut);background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:7px 13px;cursor:pointer;transition:.15s;font-family:var(--ui)}
.ogace-assist-chips button:hover{border-color:var(--gold);color:var(--tx);background:var(--panel2)}

/* Hook Frame Pages strip — 22 verticals, single source of truth:
   ogace_get_systems_list(). Plain <a href> links to real pages, styled to
   match the chip row. Each keeps its registry colour unused here (kept
   simple/neutral so links read clearly as navigation, not chat actions). */
.ogace-assist-hookframe-label{font-size:10px;color:var(--dim);padding:0 17px 6px;font-family:var(--mono);
  text-transform:uppercase;letter-spacing:.06em}
.ogace-assist-hookframe-row{display:flex;flex-wrap:wrap;gap:8px;padding:0 17px 13px}
.ogace-assist-hookframe-row a{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;
  color:var(--mut);background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:6px 12px;cursor:pointer;white-space:nowrap;
  text-decoration:none;transition:.15s;font-family:var(--ui)}
.ogace-assist-hookframe-row a:hover{border-color:var(--gold);color:var(--tx);background:var(--panel2)}
.ogace-assist-hookframe-ico{font-size:13px;line-height:1}

/* Form */
.ogace-assist-form{display:flex;align-items:center;gap:9px;padding:13px 15px;border-top:1px solid var(--line);
  background:linear-gradient(0deg, rgba(3,10,32,.92), rgba(3,10,32,.68))}
.ogace-assist-form input{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:11px 14px;color:var(--tx);font-family:var(--ui);font-size:14px;outline:none;transition:border-color .15s}
.ogace-assist-form input::placeholder{color:var(--dim)}
.ogace-assist-form input:focus{border-color:var(--gold)}

/* Send button — a 45°-rotated diamond (the logo's own silhouette) instead
   of a generic rounded square, split navy→red like the mark's two halves. */
.ogace-assist-form button{position:relative;flex:0 0 auto;width:40px;height:40px;margin:0 2px;border:none;
  color:#fff;font-size:13px;cursor:pointer;background:none;display:grid;place-items:center}
.ogace-assist-form button::before{
  content:'';position:absolute;inset:4px;border-radius:6px;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--navy),var(--terracotta));
  box-shadow:0 6px 16px rgba(224,0,37,.35),0 2px 0 rgba(255,255,255,.25) inset;
  transition:transform .18s,filter .15s}
.ogace-assist-form button:hover::before{filter:brightness(1.1)}
.ogace-assist-form button:active::before{transform:rotate(45deg) scale(.9)}
.ogace-assist-form button > *{position:relative;z-index:1}

/* Focus visibility for keyboard users */
#ogace-assist button:focus-visible,
#ogace-assist input:focus-visible,
#ogace-assist a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

@media(prefers-reduced-motion:reduce){#ogace-assist *{transition:none!important;animation:none!important}}

/* Modern mobile behaviour: the panel becomes a near-fullscreen sheet
   instead of a cramped corner box, and the page behind it stops
   scrolling while it's open. */
html.ogace-assist-lock{overflow:hidden}
@media(max-width:900px){
  .ogace-assist-panel{width:clamp(320px, 44vw, 380px)}
}
@media(max-width:640px){
  #ogace-assist{right:12px;bottom:12px}
  .ogace-assist-panel{
    right:-4px;bottom:56px;
    width:calc(100vw - 16px);
    height:min(78vh, calc(100vh - 96px));
    border-radius:18px;
    transform-origin:bottom center;
    padding-bottom:env(safe-area-inset-bottom,0)
  }
  .ogace-assist-panel.is-max{width:calc(100vw - 16px);height:min(78vh, calc(100vh - 96px))}
}
@media(max-width:400px){
  .ogace-assist-panel{height:min(82vh, calc(100vh - 76px))}
}

/* ── Deletable popup + stronger detachment from the page background ──────── */
.ogace-assist-actions{display:flex;align-items:center;gap:2px}
.ogace-assist-del{font-size:14px;opacity:.7}
.ogace-assist-del:hover{opacity:1;color:var(--red-lit,#ff4756)}
.ogace-assist-max{font-size:14px;opacity:.75}
.ogace-assist-max:hover{opacity:1}
/* Pull the panel visually OUT of the page: crisp ring + deep shadow so it
   reads as a floating surface above the webapp background, not part of it. */
.ogace-assist-panel{
  box-shadow:0 30px 80px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
  outline:1px solid rgba(59,47,217,.14);
}