/* Shared styles for the redesigned MyArena Market pages (index, cart, search, item
   group, favorites, payment_callback, pending). Extracted from per-page duplicated
   <style> blocks that had drifted out of sync across pages - keep changes here so
   every page picks them up at once instead of editing N copies. */

/* ---- Page container / header nav ---- */
body { background:#ffffff !important; }
/* #top-other is the ID this session's redesign reused for the new black top bar (logo,
   notifications, chat, account menu - see get_menu_nav() in functions.php). The legacy
   site already had rules for this same ID from its old layout, including
   cs.media.3x.css: `@media (min-width:480px) and (max-width:599px) { #top-other {
   display:none; } }` - meant for something else entirely in the old design, but now
   blanks out the whole black bar (logo included) in that exact width range (2026-08-27,
   reported by project owner). Forced visible unconditionally, same approach as
   .navbar-collapse above. */
#top-other { display:block !important; }
#content-wrapper-parent .container, #content-wrapper .container, header#top .container { max-width:none; width:100%; margin-left:auto; margin-right:auto; padding-left:32px; padding-right:32px; box-sizing:border-box; }
header#top .row.top-navigation { margin-left:-32px !important; margin-right:-32px !important; width:calc(100% + 64px) !important; background:#fff !important; height:auto !important; }
header#top .navbar { background:#fff !important; margin:0; border:0 !important; border-radius:0 !important; box-shadow:none !important; width:100%; }
header#top .hoverMenuWrapper { display:flex !important; float:none !important; background:#fff !important; border-radius:0 !important; border-top:0 !important; border-bottom:1px solid #d0d0d0 !important; box-shadow:none; margin:0; padding:0 32px; gap:28px; overflow:visible; }
header#top .hoverMenuWrapper > li { flex:none !important; float:none !important; background:none !important; }
header#top .hoverMenuWrapper > li > a { display:inline-block; padding:20px 2px; color:#444; font-weight:600; font-size:14px; background:none !important; text-align:left; white-space:nowrap; }
header#top .hoverMenuWrapper > li.active > a { color:#e53935 !important; font-weight:700; border-bottom:2px solid #e53935; background:none !important; }
header#top .hoverMenuWrapper > li > a:hover { color:#e53935 !important; text-decoration:none; background:none !important; }
header#top .mkt-nav-toggle { display:none; }

/* Real cause of the orange hover block found (2026-08-27) - cs.media.3x.css (a mobile-only
   media-query file for the OLD dark navbar theme) has:
     #top .navbar .nav > li a:hover, #top .navbar .nav > li a:focus { color:#fff; background:#b52a09 !important; }
   This UL carries `nav navbar-nav hoverMenuWrapper` all at once, so that legacy selector
   matches the exact same links this file styles. Its specificity (1 ID, 3 classes, 2
   elements) beats the plain hover rule above (1 ID, 2 classes, 3 elements) despite both
   using !important, so it won regardless of load order. Fixed by mirroring its exact
   selector with one extra element (`header` instead of bare `#top`), which is a strict
   specificity superset and therefore always wins. (The user-select fix below is still
   worth keeping - real text selection was a separate, smaller annoyance on top of this.) */
header#top .navbar .nav > li a:hover, header#top .navbar .nav > li a:focus { background:none !important; color:#e53935 !important; }
header#top .hoverMenuWrapper > li > a, header#top .mkt-gametabs-subbar a {
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}

/* Nav-item icons (2026-08-27, per project owner) - "ตลาดซื้อขาย" reuses the same custom
   storefront SVG as the inventory page's "ขาย" button (FontAwesome 4.6.1, the version
   bundled here, has no real storefront glyph); the rest are FA icons chosen to match
   each section's meaning (heart=favorites, archive=inventory, history=usage log,
   tags=my listings). Sized/aligned as one shared class so both the <svg> and <i> forms
   line up with the text the same way. */
header#top .hoverMenuWrapper > li > a .mkt-navicon { width:14px; height:14px; margin-right:6px; vertical-align:-2px; font-size:14px; }

/* Per-game market tabs (2026-08-27) - a visual sub-level directly under "ตลาดซื้อขาย",
   not a peer of the other top-nav items, so it's its own smaller/tinted row rather than
   sharing the main nav's row. Rendered as a direct sibling of <nav> inside the same
   .row.top-navigation the main nav uses (see get_menu_gametabs_subbar()) - no extra
   wrapper needed to line its left edge up with the row above it, just its own padding.
   header#top prefix - matches every other header override in this file; without it, a
   lower-specificity generic `a { color }` rule elsewhere in the loaded stylesheet
   cascade was winning and the default (non-hover) text rendered as a near-invisible
   light blue instead of this color. No active-state underline (per project owner -
   having both this and the "ตลาดซื้อขาย" tab above it underlined at once looked
   redundant) - color change alone marks the active game. */
header#top .mkt-gametabs-subbar { background:#fff; border-bottom:1px solid #eee; display:flex; gap:22px; overflow-x:auto; padding:6px 80px; }
header#top .mkt-gametabs-subbar a { display:inline-block; padding:6px 2px; font-size:12.5px; font-weight:700; color:#666; white-space:nowrap; text-decoration:none; }
header#top .mkt-gametabs-subbar a:hover { color:#e53935; text-decoration:none; }
header#top .mkt-gametabs-subbar a.active { color:#e53935; }
/* Forced open unconditionally, at every width (2026-08-27, reported by project owner -
   the whole nav row disappeared below 768px with no way to bring it back) - Bootstrap's
   OWN CSS only forces `.navbar-collapse.collapse{display:block}` at >=768px
   (bootstrap.min.3x.css); below that it falls back to the base `.collapse{display:none}`
   utility class, revealed only via clicking .navbar-toggle, which calls into Bootstrap's
   jQuery collapse plugin - a single point of failure (jQuery/Bootstrap JS not loading or
   erroring, or the toggle button being visually lost among this session's !important
   overrides) silently hides the whole nav with zero fallback. This design was never meant
   to be a hide-behind-a-hamburger menu (it's a short, always-relevant 5-item list, not a
   long drawer), so it's simpler and more robust to just never let it collapse at all,
   same as .hoverMenuWrapper's own flex-direction:column fallback below already assumes. */
header#top .navbar-collapse { display:block !important; height:auto !important; margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; }
header#top .navbar-header { display:none !important; }
#breadcrumb { background:#fff !important; box-shadow:none !important; border-bottom:none !important; }
.group_breadcrumb { border-bottom:none !important; }
/* Mobile: collapsed-by-default toggle (2026-08-28, per project owner - tried
   horizontal scroll first, but with 5 items this long (icon + Thai label each) only
   ~1 fit on screen at a time, no better than the original always-stacked version and
   not obviously scrollable either. This is a from-scratch toggle button + plain
   class swap (see mktNavToggle in mkt-shared.js) - deliberately NOT Bootstrap's
   .navbar-toggle/.collapse/jQuery plugin, since that whole mechanism (broken JS
   loading, cs.media.3x.css's leftover selectors matching reused class names) is
   what caused nearly every other header bug today. The toggle button shows the
   current page's own label so the collapsed bar still reads as "you are here",
   not just a bare unlabeled hamburger. */
@media (max-width:767px) {
  header#top .mkt-nav-toggle { display:flex; align-items:center; gap:8px; width:100%; padding:14px 16px; background:none; border:none; color:#333; font-size:14px; font-weight:600; text-align:left; cursor:pointer; }
  header#top .mkt-nav-toggle .fa-caret-down { margin-left:auto; color:#999; transition:transform 0.15s ease; }
  header#top .mkt-nav-toggle.mkt-nav-open .fa-caret-down { transform:rotate(180deg); }
  header#top .hoverMenuWrapper { display:none !important; flex-direction:column !important; gap:0 !important; padding:0 16px 4px !important; border-top:1px solid #eee; }
  header#top .hoverMenuWrapper.mkt-nav-open { display:flex !important; }
  header#top .hoverMenuWrapper > li > a { display:block; padding:10px 0; }
  header#top .mkt-gametabs-subbar { padding:6px 32px !important; }
}
@media (max-width:600px) {
  #content-wrapper-parent .container, #content-wrapper .container, header#top .container { padding-left:12px; padding-right:12px; margin-left:0; margin-right:0; }
  header#top .row.top-navigation { margin-left:-12px !important; margin-right:-12px !important; width:calc(100% + 24px) !important; }
  header#top .hoverMenuWrapper { padding:0 12px; }
}

/* ---- Header search box + autocomplete suggest panel (pages that show it) ---- */
/* margin-top removed (2026-08-27, found by project owner) - with the row's own
   background at #f5f5f5 sitting right after the white page background (or, on pages
   with the game-tabs subbar above it, right after that subbar's white background +
   1px #eee border), an 8px top margin showed through as a thin stray white seam
   between the two. padding:16px 0 alone still gives the row plenty of visual breathing
   room without needing a margin that reveals whatever's behind it. */
.gs-search-row { background:#f5f5f5; padding:16px 0; margin-bottom:12px; }
.gs-search-row .search-form-wrap { position:relative !important; max-width:600px !important; width:600px !important; margin:0 auto !important; float:none !important; display:block !important; }
.gs-search-row .search-form { display:flex; border-radius:24px; overflow:hidden; border-color:#ddd; background:#fff; }
.gs-search-row .search-form input[type="text"] { flex:1; float:none; width:auto; border:none; padding-left:16px; }
.gs-search-row .search-form .search-submit { float:none; flex:none; border-radius:0; padding:8px 8px; }
.gs-search-suggest { position:absolute; top:100%; left:0; right:0; margin-top:8px; background:#fff; border:1px solid #e2e2e2; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,0.12); padding:16px; display:none; gap:24px; z-index:1000; text-align:left; }
.gs-search-suggest.active { display:flex; }
.gs-search-suggest-col { flex:1; min-width:0; }
.gs-search-suggest-col:first-child { flex:3; }
.gs-search-suggest-col:last-child { flex:7; }
.gs-search-suggest-header { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#888; margin-bottom:8px; }
.gs-search-suggest-header span { font-weight:700; color:#333; font-size:13px; }
#top .gs-search-suggest-header a { color:#e53935 !important; font-size:12px; cursor:pointer; font-weight:400; }
.gs-search-recent-list { display:flex; flex-wrap:wrap; gap:8px; }
.gs-search-recent-pill { background:#f2f2f2; border-radius:16px; padding:6px 12px; font-size:13px; color:#333; cursor:pointer; white-space:nowrap; }
.gs-search-recent-pill:hover { background:#e8e8e8; }
#top .gs-search-result-item { display:flex; align-items:flex-start; gap:10px; padding:6px 0; text-decoration:none; color:#333 !important; }
#top .gs-search-result-item:hover { color:#e53935 !important; text-decoration:none; }
.gs-search-result-item img { width:36px; height:36px; object-fit:cover; border-radius:6px; background:#f5f5f5; flex-shrink:0; }
.gs-search-result-name { font-size:11px; flex:1; min-width:0; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.3; }
.gs-search-result-price { font-size:12px; color:#e53935; font-weight:600; white-space:nowrap; }
.gs-search-empty { font-size:12px; color:#999; padding:8px 0; }
@media (max-width:600px) {
  .gs-search-row .search-form-wrap { width:100% !important; max-width:100% !important; }
  .gs-search-suggest { flex-direction:column; gap:16px; }
}

/* ---- Item card (used by render_mkt_card() in include/functions.php) ---- */
.mkt-card { background:#fff; border:1px solid #ececec; border-radius:10px; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,0.06); display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:box-shadow .15s, border-color .15s; }
.mkt-card:hover, .mkt-card:focus { box-shadow:0 6px 16px rgba(0,0,0,0.12); border-color:#e53935; text-decoration:none; color:inherit; }
/* VIP recommended cards get the same gold treatment as VIP offer-cards on the item
   detail page (market_item_group.php's .offer-card.vip), so the "featured" feel carries
   through from the homepage section into the click-through. */
.mkt-card.vip { border:2px solid #d4a017; box-shadow:0 2px 8px rgba(212,160,23,0.3); }
.mkt-card.vip:hover, .mkt-card.vip:focus { box-shadow:0 6px 16px rgba(212,160,23,0.45); border-color:#d4a017; }
.mkt-card.vip .mkt-body { background:linear-gradient(135deg,#fffbea,#fff); }
/* Same background as .mkt-body (white for regular cards, the gold gradient for VIP) so
   the image tile doesn't read as a different surface from the name/price area below it. */
.mkt-img-wrap { position:relative; aspect-ratio:1/1; background:#fff; overflow:hidden; padding:32px; box-sizing:border-box; }
.mkt-card.vip .mkt-img-wrap { padding:20px; background:linear-gradient(135deg,#fffbea,#fff); }
@media (max-width:600px) {
  .mkt-img-wrap { padding:16px; }
  .mkt-card.vip .mkt-img-wrap { padding:12px; }
}
.mkt-img-wrap img { width:100%; height:100%; object-fit:contain; display:block; }
.mkt-ribbon { position:absolute; top:10px; left:-30px; width:130px; padding:3px 0; background:#333; color:#fff; font-size:10px; font-weight:700; text-align:center; letter-spacing:.5px; transform:rotate(-45deg); box-shadow:0 1px 3px rgba(0,0,0,0.25); }
/* Same gradient already used for the VIP badge/banner elsewhere - reusing an already-
   validated color combo rather than picking a new one. The red end is dark enough to
   keep white text readable across the whole ribbon, not just the gold end. */
.mkt-card.vip .mkt-ribbon { background:linear-gradient(90deg,#d4a017,#ffd700,#e53935); color:#fff; }
/* Platinum (2026-08-29): a cooler, darker treatment than Gold's warm gold/red - not just a
   recolor, the metallic gradient sweeps (background-size > 100% + the shine keyframe) so
   it reads as a distinct "premium" material rather than a gold card in a different color.
   Rules placed after .vip so they win on equal specificity (every Platinum card is also a
   .vip card - see render_mkt_card()'s $isPlatinum/$isVip). */
.mkt-card.platinum { border-color:#5b6d80; box-shadow:0 2px 8px rgba(70,90,110,0.35); }
.mkt-card.platinum:hover, .mkt-card.platinum:focus { box-shadow:0 6px 16px rgba(70,90,110,0.5); border-color:#5b6d80; }
.mkt-card.platinum .mkt-body { background:linear-gradient(135deg,#eef1f4,#fff); }
.mkt-card.platinum .mkt-img-wrap { background:linear-gradient(135deg,#eef1f4,#fff); }
@keyframes mkt-platinum-shine {
  0% { background-position:0% 50%; }
  100% { background-position:200% 50%; }
}
.mkt-card.platinum .mkt-ribbon,
.mkt-badge.platinum {
  background:linear-gradient(90deg,#3a4750,#8e9eab,#c9d3da,#8e9eab,#3a4750);
  background-size:250% 100%;
  animation:mkt-platinum-shine 3.5s linear infinite;
  color:#fff;
}
/* Silver (2026-08-29) - a real but quieter tier: no shimmer (that's reserved for
   Platinum), a lighter/cooler color than Gold so the escalation Silver -> Gold ->
   Platinum reads as increasingly special rather than three unrelated colors. Standalone
   class (never combined with .vip/.platinum - a card is exactly one of none/silver/
   gold/platinum), so no declaration-order dependency like .platinum vs .vip has. */
.mkt-card.silver { border-color:#c7ced4; box-shadow:0 2px 6px rgba(120,130,140,0.14); }
.mkt-card.silver:hover, .mkt-card.silver:focus { box-shadow:0 6px 14px rgba(120,130,140,0.24); border-color:#c7ced4; }
.mkt-card.silver .mkt-body { background:linear-gradient(135deg,#f8f9fa,#fff); }
.mkt-card.silver .mkt-img-wrap { background:linear-gradient(135deg,#f8f9fa,#fff); }
.mkt-card.silver .mkt-ribbon { background:#c7ced4; color:#4a545c; }
.mkt-badge { position:absolute; top:8px; right:8px; font-size:11px; padding:3px 8px; border-radius:10px; color:#fff; }
.mkt-badge.sold { background:rgba(0,0,0,0.62); }
.mkt-badge.new { background:#e53935; }
/* More golden (2026-08-30) - added a bright gold highlight stop; project owner liked the
   original gold->red combo but wanted it to read more "gold" (it was losing to Bronze's
   new copper gradient in prominence). */
.mkt-badge.vip { background:linear-gradient(90deg,#d4a017,#ffd700,#e53935); font-weight:700; }
.mkt-badge.platinum { font-weight:700; letter-spacing:.3px; }
/* Lightened (2026-08-29, was a solid #9ba7b3 with white text) - read too close to
   Platinum's steel tone in a static screenshot; now a genuinely light gray with dark
   text so the Silver -> Gold -> Platinum escalation stays visually distinct. */
.mkt-badge.silver { background:#e3e7ea; color:#4a545c; font-weight:700; }
/* Bronze (2026-08-29) - deliberately no distinct color per project owner (just a plain
   neutral badge, unlike Silver/Gold/Platinum) - still worth a badge so a Bronze shop is
   identifiable, just without implying it's a "featured" tier the way a color would. */
/* Copper/bronze tone (2026-08-30, was a plain #eee/#777 gray) - too close to Silver's
   light gray badge (project owner: the two read as nearly the same color). A real
   copper-brown also can't be mistaken for Gold's yellow-gold. */
.mkt-badge.bronze { background:linear-gradient(90deg,#a8632a,#c9822f); color:#fff; font-weight:700; }
.mkt-wish { position:absolute; bottom:8px; right:8px; width:26px; height:26px; background:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,0.18); color:#999; font-size:12px; cursor:pointer; }
.mkt-wish.active { color:#e53935; }
.mkt-wish:hover { color:#e53935; }
.mkt-body { padding:10px 12px 12px; display:flex; flex-direction:column; flex:1; }
.mkt-name { color:#111; font-weight:700; margin:0 0 10px; white-space:normal; line-height:1.35; word-break:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em; }
.mkt-price-wrap { margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:8px; }
.mkt-price-col { display:flex; flex-direction:column; min-width:0; }
.mkt-seller-count { font-size:11px; color:#999; white-space:nowrap; flex-shrink:0; }
.mkt-price-label { font-size:11px; color:#999; display:block; }
.mkt-price { color:#e53935; font-weight:700; font-size:15px; }

/* ---- Mini chat popups (Messenger-style floating windows, opened from the header
   notification dropdown - see mkt-shared.js). Fixed to the viewport, so these rules
   are intentionally NOT scoped under header#top like the nav rules above. ---- */
.gs-minichat-dock { position:fixed; bottom:0; right:20px; display:flex; flex-direction:row-reverse; gap:10px; align-items:flex-end; z-index:2000; }
.gs-minichat { width:280px; height:360px; background:#fff; border-radius:8px 8px 0 0; box-shadow:0 4px 20px rgba(0,0,0,0.25); display:flex; flex-direction:column; overflow:hidden; }
.gs-minichat.minimized { height:auto; }
.gs-minichat.minimized .gs-minichat-messages, .gs-minichat.minimized .gs-minichat-compose { display:none; }
.gs-minichat-header { background:#e53935; color:#fff; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; flex-shrink:0; }
/* Tier-colored header (2026-08-31, per project owner) - a VIP seller's panel now carries
   their own tier color instead of the plain red every panel used to share; a Standard/
   no-tier seller keeps the plain red+white header untouched (no class added). Same
   gradients as the tier badge/offer-badge elsewhere, so it reads as the same signal. */
.gs-minichat-header.tier-platinum { background:linear-gradient(90deg,#3a4750,#8e9eab,#c9d3da,#8e9eab,#3a4750); color:#fff; }
.gs-minichat-header.tier-gold { background:linear-gradient(90deg,#d4a017,#ffd700,#e53935); color:#fff; }
.gs-minichat-header.tier-silver { background:#e3e7ea; color:#4a545c; }
.gs-minichat-header.tier-silver .gs-minichat-header-btns button { color:#4a545c; }
.gs-minichat-header.tier-bronze { background:linear-gradient(90deg,#a8632a,#c9822f); color:#fff; }
.gs-minichat-name { font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Same gold tone used sitewide for VIP. White background here (not the usual #fff3cd)
   since this sits on the minichat header's red band, not a white card. */
.gs-minichat-header .gs-vip-badge, .gs-vip-badge { display:inline-block; background:#fff3cd; color:#946200; font-size:10px; font-weight:700; padding:1px 6px; border-radius:4px; margin-left:6px; vertical-align:middle; white-space:nowrap; }
/* Tier-specific overrides (2026-08-31 bug fix, found live by project owner) - the badge
   used to be a flat Gold-or-nothing "VIP" label regardless of actual tier, mismatching
   the tier-colored badge already shown on the item/shop page. Same gradients/colors as
   market_item_group.php's .offer-badge tier classes, so the two read as the same signal. */
.gs-vip-badge.tier-platinum { background:linear-gradient(90deg,#3a4750,#8e9eab,#c9d3da,#8e9eab,#3a4750); color:#fff; }
.gs-vip-badge.tier-gold { background:linear-gradient(90deg,#d4a017,#ffd700,#e53935); color:#fff; }
.gs-vip-badge.tier-silver { background:#e3e7ea; color:#4a545c; }
.gs-vip-badge.tier-bronze { background:linear-gradient(90deg,#a8632a,#c9822f); color:#fff; }
/* Icon-only variant (2026-08-31, per project owner) - now that the minichat header itself
   carries the tier color, a separately tier-colored chip around the icon read as a
   redundant frame - stripped down to a bare emoji, moved in front of the name instead of
   after it. Must come after the tier-color rules above (equal specificity, source order
   wins) so it actually overrides their background. */
.gs-vip-badge.gs-vip-badge-icononly { background:none; color:inherit; padding:0; border-radius:0; margin-left:0; margin-right:6px; font-size:13px; }
/* Presence dot (2026-08-31, per project owner) - white ring so it reads against any
   background (avatar photo, tier-colored header, etc). */
.gs-presence-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle; box-shadow:0 0 0 1.5px #fff; }
.gs-presence-dot.online { background:#43a047; }
.gs-presence-dot.offline { background:#bbb; }
.gs-minichat-pending-item { display:flex; align-items:center; gap:8px; padding:8px 12px; border-top:1px solid #eee; background:#fafafa; font-size:12px; color:#333; flex-shrink:0; }
/* Wraps the image+text so the pending item preview links to the item itself (2026-08-31,
   fixed - the url was already being sent from PHP but the render function never used it).
   display:flex+flex:1 here (not on the img/span themselves) keeps the exact same visual
   row layout as before, just with a clickable wrapper around it. */
.gs-minichat-pending-item-link { display:flex; align-items:center; gap:8px; flex:1; min-width:0; text-decoration:none; color:inherit; }
.gs-minichat-pending-item-link:hover { text-decoration:underline; color:inherit; }
.gs-minichat-pending-item img { width:32px; height:32px; object-fit:cover; border-radius:4px; background:#eee; flex-shrink:0; }
.gs-minichat-pending-item span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gs-minichat-pending-item-remove { background:none; border:none; color:#999; font-size:15px; cursor:pointer; padding:0; line-height:1; flex-shrink:0; }
.gs-minichat-pending-item-remove:hover { color:#e53935; }
.gs-minichat-header-btns { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.gs-minichat-header-btns button { background:none; border:none; color:#fff; font-size:15px; cursor:pointer; padding:0; line-height:1; opacity:0.85; }
.gs-minichat-header-btns button:hover { opacity:1; }
.gs-minichat-messages { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:6px; background:#fafafa; }
.gs-minichat-bubble-row { display:flex; }
.gs-minichat-bubble-row.mine { justify-content:flex-end; }
.gs-minichat-bubble { max-width:75%; padding:7px 11px; border-radius:12px; font-size:12.5px; line-height:1.4; word-break:break-word; }
.gs-minichat-bubble-row:not(.mine) .gs-minichat-bubble { background:#fff; color:#333; border:1px solid #eee; border-bottom-left-radius:3px; }
.gs-minichat-bubble-row.mine .gs-minichat-bubble { background:#e53935; color:#fff; border-bottom-right-radius:3px; }
.gs-minichat-compose { border-top:1px solid #eee; padding:8px; display:flex; gap:6px; flex-shrink:0; background:#fff; }
.gs-minichat-compose input { flex:1; border:1px solid #ddd; border-radius:16px; padding:6px 12px; font-size:12.5px; min-width:0; }
.gs-minichat-compose button { background:#e53935; color:#fff; border:none; border-radius:16px; padding:6px 14px; font-size:12.5px; font-weight:600; cursor:pointer; flex-shrink:0; }
@media (max-width:700px) {
  .gs-minichat-dock { right:0; left:0; bottom:0; }
  .gs-minichat { width:100%; height:70vh; border-radius:0; }
}