/* Compact Chat: conversation first, navy header and restrained gold actions. */
#gab-widget .chat-widget { width: 420px; height: 680px; max-height: calc(100dvh - 12px); bottom: 0; border-radius: 20px 20px 0 0; }
#gab-widget .header { padding: 12px 14px; gap: 8px; background: #012244; color: #fff; border-bottom: 0; }
#gab-widget .brand { min-width: 0; gap: 10px; }
#gab-widget .brand-info { min-width: 0; }
#gab-widget .brand-info h3 { margin: 0; color: #fff; font-size: 16px; line-height: 1.35; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#gab-widget .brand-info p { margin: 3px 0 0; color: #d4dfeb; font-size: 11px; line-height: 1.4; }
#gab-widget .brand-logo.gab-mitra-brand { width: 40px; height: 40px; flex-basis: 40px; }
#gab-widget .header .actions { gap: 2px; }
#gab-widget .gab-language-switch { width: 87px; min-height: 36px; margin: 0 3px 0 0; padding: 6px 3px; border: 1px solid #ffffff4d; border-radius: 9px; background: #012244; color: #fff; font: 500 12px/1.3 var(--font); text-transform: none; letter-spacing: 0; color-scheme: dark; }
#gab-widget .gab-language-switch:focus-visible { outline-color: #e4c485; }
#gab-widget .header .icon-btn { color: #fff; background: transparent; border: 0; border-radius: 50%; }
#gab-widget .header .icon-btn:hover { background: #ffffff1a; }
#gab-widget .header .icon-btn:focus-visible { outline-color: #e4c485; }
#gab-widget [aria-busy="true"] .brand-info p::after { color: #eed7a9; }
#gab-widget .gab-shortcuts { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; padding: 9px 12px; background: #fff; border-bottom: 1px solid #e8edf3; overflow-x: auto; scrollbar-width: thin; }
#gab-widget .gab-shortcuts button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; min-height: 44px; padding: 7px 10px; margin: 0; border: 1px solid #dfe6ee; border-radius: 12px; background: #fff; color: #012244; font: 600 11px/1.3 var(--font); white-space: nowrap; text-transform: none; letter-spacing: 0; cursor: pointer; }
#gab-widget .gab-shortcuts button:hover:not(:disabled) { background: #f8f5ee; border-color: #c7a45b; }
#gab-widget .gab-shortcuts img { width: 24px; height: 24px; object-fit: contain; }
#gab-widget .gab-shortcuts button:disabled { opacity: .5; cursor: wait; }
#gab-widget .gab-shortcuts { scrollbar-width: thin; scrollbar-color: #c6d0dc transparent; }
#gab-widget .gab-shortcuts::-webkit-scrollbar { height: 3px; }
#gab-widget .gab-shortcuts::-webkit-scrollbar-track { background: transparent; }
#gab-widget .gab-shortcuts::-webkit-scrollbar-thumb { border-radius: 6px; background: #c6d0dc; }
#gab-widget .gab-shortcuts:hover::-webkit-scrollbar-thumb { background: #91a3b6; }
#gab-widget .gab-navigation { padding: 0 12px; border-bottom: 1px solid #edf1f5; }
#gab-widget .gab-navigation button { min-height: 36px; padding: 5px 7px; font-size: 11px; }
#gab-widget .messages { padding: 16px 12px; gap: 12px; background: #fff; }
#gab-widget .msg-row { gap: 8px; }
#gab-widget .avatar.system { width: 28px; height: 28px; flex: 0 0 28px; overflow: hidden; border-radius: 50%; border: 1px solid #e3d4b5; background: #fbf5e9; }
#gab-widget .avatar.system img { display: block; width: 100%; height: 100%; object-fit: cover; }
#gab-widget .msg-row.system > .bubble { padding: 11px 13px; border: 1px solid #e8edf3; border-radius: 4px 15px 15px; background: #f4f6f9; color: #213c55; font-size: 13px; line-height: 1.65; box-shadow: none; }
#gab-widget .msg-row.user > .bubble { padding: 10px 13px; border: 0; border-radius: 15px 15px 4px; background: #012244; color: #fff; font-size: 13px; line-height: 1.6; box-shadow: none; }
#gab-widget .msg-row.system:is(.welcome-row,.choices-row,.shopping-row) > .bubble { width: 100%; max-width: none; padding: 0; border: 0; background: transparent; }
#gab-widget .welcome-panel h2 { margin: 6px 0; font-size: 21px; line-height: 1.3; letter-spacing: -.4px; }
#gab-widget .welcome-panel p { margin: 0; font-size: 12px; line-height: 1.6; }
#gab-widget .welcome-eyebrow { color: #8a6d36; font-size: 9px; letter-spacing: 1.2px; }
#gab-widget .home-actions { gap: 8px; }
#gab-widget .home-actions .chip,
#gab-widget .home-actions .chip:has(.gab-choice-3d),
#gab-widget .home-actions .chip:last-child:nth-child(odd) { flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; min-height: 74px; padding: 12px 22px 12px 10px; border-radius: 12px; }
#gab-widget .home-actions .gab-choice-3d { width: 32px; height: 32px; flex: 0 0 32px; object-fit: contain; }
#gab-widget .home-actions .choice-label { font-size: 12px; line-height: 1.4; }
#gab-widget .home-actions .chip .choice-arrow { top: 50%; right: 7px; transform: translateY(-50%); }
#gab-widget .home-actions .choice-arrow svg { width: 12px; height: 12px; }
#gab-widget .choices-row .card { margin-top: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
#gab-widget .quick-actions { display: flex; flex-wrap: wrap; gap: 7px; }
#gab-widget .quick-actions .chip,
#gab-widget .quick-actions .chip:last-child:nth-child(odd) { flex: 0 1 auto; flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px; min-height: 44px; padding: 8px 11px; border-radius: 12px; font-size: 12px; }
#gab-widget .quick-actions .gab-choice-3d { width: 24px; height: 24px; object-fit: contain; }
#gab-widget .quick-actions .choice-arrow { display: none; }
#gab-widget .gab-shop-results { gap: 9px; margin-top: 10px; }
#gab-widget .gab-shop-product { grid-template-columns: 76px minmax(0,1fr); align-items: start; gap: 10px; padding: 10px; border: 1px solid #e0e6ee; border-radius: 13px; box-shadow: 0 2px 8px #01224406; }
#gab-widget .gab-shop-product img { width: 76px; height: 88px; object-fit: contain; background: #f6f7fa; border-radius: 9px; }
#gab-widget .gab-shop-product h3 { margin: 0 0 5px; font-size: 12px; line-height: 1.45; }
#gab-widget .gab-shop-price strong { font-size: 16px; }
#gab-widget .gab-discount { background: #f6eedc; color: #75561e; }
#gab-widget .gab-shop-product small { color: #53697d; }
#gab-widget .gab-shop-product a { display: inline-flex; align-items: center; min-height: 40px; margin-top: 7px; padding: 7px 12px; border: 1px solid #c7a45b; border-radius: 10px; background: #f5e5bf; color: #012244; font-size: 11px; line-height: 1.3; text-decoration: none; }
#gab-widget .gab-shop-product a:hover { background: #ecd29d; }
#gab-widget .input-bar { gap: 6px; padding: 10px; border-top: 1px solid #e4eaf1; background: #fff; }
#gab-widget .input-box { min-width: 0; height: 44px; padding: 10px 13px; font-size: 13px; background: #fff; border-radius: 24px; }
#gab-widget .gab-mic { width: 36px; flex-basis: 36px; color: #012244; }
#gab-widget .send-btn { width: 44px; height: 44px; background: #012244; color: #e5c17b; }
#gab-widget .gab-audio-controls[hidden] { display: none; }
#gab-widget .gab-audio-controls { flex: 0 0 auto; display: flex; justify-content: flex-end; padding: 5px 12px; background: #fff; border-top: 1px solid #edf1f5; }
#gab-widget .gab-audio-controls button { min-height: 36px; padding: 6px 12px; border: 1px solid #c7a45b; border-radius: 9px; background: #fbf5e9; color: #012244; font: 600 12px/1.3 var(--font); text-transform: none; cursor: pointer; }
@media (max-width: 480px) {
    #gab-widget .chat-widget { width: 100% !important; max-width: 100% !important; right: 0 !important; left: 0 !important; top: 10px !important; bottom: 0 !important; height: calc(100dvh - 10px) !important; max-height: calc(100dvh - 10px) !important; border-radius: 18px 18px 0 0 !important; }
    #gab-widget .welcome-panel h2 { font-size: 21px; }
    #gab-widget .input-bar { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
    #gab-widget .input-box { font-size: 16px; }
}
@media (max-width: 390px) {
    #gab-widget .header .actions { display: grid; grid-template-columns: 82px 32px; align-items: center; }
    #gab-widget .gab-language-switch { grid-column: 1; grid-row: 1 / 3; width: 80px; font-size: 11px; }
    #gab-widget .header .actions .icon-btn { grid-column: 2; width: 32px; height: 28px; }
    #gab-widget .brand-info h3 { font-size: 14px; }
    #gab-widget .brand-info p { font-size: 10px; }
}
@media (max-width: 350px) {
    #gab-widget .header { padding: 10px; }
    #gab-widget .brand-info h3 { font-size: 14px; }
    #gab-widget .brand-info p { font-size: 10px; }
    #gab-widget .home-actions .chip { gap: 5px; }
    #gab-widget .home-actions .gab-choice-3d { width: 27px; height: 27px; flex-basis: 27px; }
}