/**
 * File: assets/chat-pay-per-minute.css
 * Aesthetic: Refined mystic — soft purple palette, generous whitespace, subtle animations.
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,400&display=swap');

:root {
  --vc-font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --vc-purple-50: #271d4012; --vc-purple-100: #CECBF6; --vc-purple-200: #AFA9EC;
  --vc-purple-400: #232323; --vc-purple-600: #271d3f; --vc-purple-800: #373737; --vc-purple-900: #000000;
  --vc-teal-500: #b5995a; --vc-teal-600: #7ba389;
  --vc-red-500: #E24B4A; --vc-red-600: #A32D2D;
  --vc-amber-50: #FAEEDA; --vc-amber-700: #854F0B;
  --vc-gray-50: #f4f4f4; --vc-gray-100: #F1EFE8; --vc-gray-200: #E8E6F0;
  --vc-gray-300: #D3D1DC; --vc-gray-500: #494658; --vc-gray-700: #4A4758; --vc-gray-900: #1E1B2E;
  --vc-white: #ffffff;
  --vc-radius: 16px; --vc-radius-sm: 10px; --vc-radius-pill: 50px;
  --vc-shadow-soft: 0 1px 3px rgba(38,33,92,0.04), 0 4px 16px rgba(38,33,92,0.06);
  --vc-transition: 0.2s cubic-bezier(0.4,0,0.2,1);
}

.voy-chat-app { font-family:var(--vc-font); color:var(--vc-gray-900); max-width:1220px; margin:0 auto; background:var(--vc-gray-50); border-radius:var(--vc-radius); border:1px solid var(--vc-gray-200); box-shadow:var(--vc-shadow-soft); overflow:hidden; position:relative; }

/* ── Top bar ── */
.voy-chat-topbar { display:flex; align-items:center; justify-content:space-between; padding:0.75rem 1.25rem; background:#271d3f; color:var(--vc-white); }
.voy-chat-topbar-left { display:flex; align-items:center; gap:0.5rem; font-size:0.95rem; font-weight:500; }
.voy-chat-topbar-right { display:flex; align-items:center; gap:0.75rem; }
.voy-icon-crystal { font-size:1.15rem; }
.voy-balance-badge { background:rgba(255,255,255,0.12); padding:0.25rem 0.85rem; border-radius:var(--vc-radius-pill); font-size:0.82rem; font-weight:500; backdrop-filter:blur(8px); }

/* ── Panels ── */
.voy-panel { padding:1.25rem; }
.voy-panel h3 { margin:0 0 1rem; font-size:18px !important; font-weight:500; font-family: 'Poly'; color:var(--vc-gray-500) !important; letter-spacing:0.02em; }
.voy-empty-state { text-align:center; color:var(--vc-gray-500); padding:2.5rem 1rem; font-size:0.9rem; }

/* ── How it works ── */
.voy-how-it-works { background:var(--vc-purple-50); border-radius:var(--vc-radius-sm); padding:1rem 1.25rem; margin-bottom:1.25rem; }
.voy-how-title { font-weight:500; font-size:17px; color:var(--vc-purple-800); margin:0 0 0.85rem; }
.voy-how-steps { display:flex; gap:0.75rem; }
.voy-how-step { flex:1; text-align:center; }
.voy-how-step p { font-size:15px; color:var(--vc-purple-800); margin:0; line-height:1.4; }
.voy-how-hint { opacity:0.55; }
.voy-how-num { width:34px; height:34px; border-radius:50%; background:var(--vc-purple-600); color:var(--vc-white); display:flex; align-items:center; justify-content:center; font-weight:500; font-size:0.85rem; margin:0 auto 0.4rem; }
.voy-how-num-last { background:var(--vc-teal-500); }
.voy-how-note { font-size:15px; color:var(--vc-purple-400); margin:2.05rem 0 0; text-align:center; }

/* ── Voyant cards ── */
.voy-voyant-grid { display:flex; flex-direction:column; gap:0.65rem; }
.voy-voyant-card { display:flex; align-items:center; gap:0.85rem; padding:0.85rem 1rem; background:var(--vc-white); border:1px solid var(--vc-gray-200); border-radius:var(--vc-radius-sm); transition:border-color var(--vc-transition),box-shadow var(--vc-transition); }
.voy-voyant-card:hover { border-color:var(--vc-purple-200); box-shadow:0 2px 12px rgba(83,74,183,0.08); }
.voy-voyant-avatar { position:relative; flex-shrink:0; }
.voy-voyant-avatar img { width:48px; height:48px; border-radius:50%; object-fit:cover; }
.voy-online-dot { display:inline-block; width:12px; height:12px; background:#1cce26; border-radius:50%; border:2px solid var(--vc-white); }
.voy-voyant-avatar .voy-online-dot { position:absolute; bottom:1px; right:1px; }
@keyframes voy-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(29,158,117,0.4)} 50%{box-shadow:0 0 0 4px rgba(29,158,117,0)} }
.voy-voyant-info { flex:1; display:flex; flex-direction:column; gap:0.1rem; }
.voy-voyant-info strong { font-size:0.92rem; font-weight:500; }
.voy-voyant-rate { font-size:0.78rem; color:var(--vc-teal-500); }

/* ── Session list ── */
.voy-session-list { display:flex; flex-direction:column; gap:0.5rem; }
.voy-session-row { display:flex; align-items:center; gap:0.75rem; padding:0.7rem 0.85rem; background:var(--vc-white); border:1px solid var(--vc-gray-200); border-radius:var(--vc-radius-sm); flex-wrap:wrap; transition:border-color var(--vc-transition); }
.voy-session-row.voy-session-active { border-color:var(--vc-purple-200); background:var(--vc-purple-50); }
.voy-session-info { flex:1; display:flex; flex-direction:column; gap:0.1rem; }
.voy-session-info strong { font-size:0.9rem; font-weight:500; }
.voy-session-date { font-size:0.86rem; color:var(--vc-gray-500); }
.voy-session-detail { font-size:0.8rem; color:var(--vc-gray-500); }
.voy-badge { font-size:0.68rem; padding:0.2rem 0.6rem; border-radius:var(--vc-radius-pill); font-weight:500; text-transform:uppercase; letter-spacing:0.04em; }
.voy-badge-active { background:rgba(29,158,117,0.1); color:var(--vc-teal-600); }
.voy-badge-ended { background:var(--vc-gray-100); color:var(--vc-gray-500); }

/* ── Stats cards ── */
.voy-stats-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.65rem; margin-bottom:1.5rem; }
.voy-stat-card { background:var(--vc-gray-50); border:1px solid var(--vc-gray-200); border-radius:var(--vc-radius-sm); padding:0.85rem; display:flex; flex-direction:column; gap:0.2rem; }
.voy-stat-label { font-size:15px; color:var(--vc-gray-500); letter-spacing:0.02em; }
.voy-stat-value { font-size:1.35rem; font-weight:500; color:var(--vc-gray-900); font-variant-numeric:tabular-nums; }
.voy-stat-revenue { color:var(--vc-teal-500); }

/* ── Session cost (voyant list) ── */
.voy-session-cost { font-size:0.92rem; color:var(--vc-gray-500); margin-left:0.35rem; font-variant-numeric:tabular-nums; }

/* ── Pagination ── */
.voy-pagination { display:flex; align-items:center; justify-content:center; gap:0.75rem; margin-top:1rem; }
.voy-page-info { font-size:1.02rem; color:var(--vc-gray-500); }
.voy-page-btn { background:var(--vc-white)!important; border:1px solid var(--vc-gray-200)!important; color:var(--vc-gray-700)!important; font-size:0.8rem!important; text-decoration:none!important; padding:0.35rem 0.85rem!important; }
.voy-page-btn:hover { border-color:var(--vc-purple-200)!important; }

/* ── Chat session header ── */
.voy-chat-session-header { display:flex; align-items:center; gap:0.75rem; padding:0 0 0.85rem; border-bottom:1px solid var(--vc-gray-200); flex-wrap:wrap; }
.voy-chat-partner { display:flex; align-items:center; gap:0.45rem; flex:1; }
.voy-chat-partner .voy-online-dot { position:static; border-color:transparent; animation:voy-pulse 2s infinite; }
.voy-chat-partner strong { font-size:0.95rem; font-weight:500; }
.voy-chat-meta { display:flex; align-items:center; gap:0.85rem; }
.voy-timer { display:flex; align-items:center; gap:0.25rem; font-variant-numeric:tabular-nums; }
.voy-timer-icon { font-size:0.95rem; }
#timer-display { font-size:1.3rem; font-weight:500; color:var(--vc-purple-800); }
.voy-cost { font-variant-numeric:tabular-nums; }
#cost-display, #remaining-display { font-size:17px; font-weight:500; color:var(--vc-teal-500); }

/* ── Warning banner ── */
.voy-warning-banner { background:var(--vc-amber-50); border:1px solid rgba(186,117,23,0.2); color:var(--vc-amber-700); padding:0.5rem 0.85rem; border-radius:var(--vc-radius-sm); font-size:0.82rem; text-align:center; margin-top:0.65rem; animation:voy-slide-down 0.3s ease; }
@keyframes voy-slide-down { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }

/* ── Messages container ── */
.voy-messages-container { height:380px; overflow-y:auto; padding:0.85rem 0.5rem; display:flex; flex-direction:column; gap:0.3rem; scroll-behavior:smooth; background:var(--vc-white); border-radius:var(--vc-radius-sm); border:1px solid var(--vc-gray-200); margin-top:0.65rem; }
.voy-messages-container::-webkit-scrollbar { width:4px; }
.voy-messages-container::-webkit-scrollbar-track { background:transparent; }
.voy-messages-container::-webkit-scrollbar-thumb { background:var(--vc-gray-300); border-radius:10px; }

/* ── Bubbles ── */
.voy-msg { max-width:72%; padding:0.6rem 0.9rem; animation:voy-msg-in 0.25s ease; word-wrap:break-word; line-height:1.5; }
@keyframes voy-msg-in { from{opacity:0;transform:translateY(4px) scale(0.98)} to{opacity:1;transform:translateY(0) scale(1)} }
.voy-msg-own { align-self:flex-end; background:var(--vc-purple-600); color:var(--vc-white); border-radius:18px 18px 4px 18px; }
.voy-msg-other { align-self:flex-start; background:var(--vc-purple-50); color:var(--vc-purple-900); border-radius:18px 18px 18px 4px; }
.voy-msg-text { font-size:0.88rem; }
.voy-msg-time { font-size:0.68rem; opacity:0.55; text-align:right; margin-top:0.15rem; }
.voy-msg-own .voy-msg-time { color:rgba(255,255,255,0.65); }
.voy-msg-system { align-self:center; background:var(--vc-gray-100); color:var(--vc-gray-500); padding:0.25rem 0.85rem; border-radius:var(--vc-radius-pill); font-size:0.76rem; text-align:center; }

/* ── Typing indicator ── */
.voy-typing { display:flex; align-items:center; gap:0.35rem; padding:0.2rem 0.75rem; font-size:0.78rem; color:var(--vc-gray-500); }
.voy-typing em { font-style:normal; }
.voy-typing-dot { width:5px; height:5px; background:var(--vc-purple-200); border-radius:50%; animation:voy-typing-bounce 1.2s infinite; }
.voy-typing-dot:nth-child(2) { animation-delay:0.2s; }
.voy-typing-dot:nth-child(3) { animation-delay:0.4s; }
@keyframes voy-typing-bounce { 0%,60%,100%{transform:translateY(0);opacity:0.35} 30%{transform:translateY(-4px);opacity:1} }

/* ── Input bar ── */
.voy-input-bar { display:flex; align-items:center; gap:0.5rem; padding:0.75rem; background:transparent; }
.voy-input-bar input[type="text"] { flex:1; padding:0.65rem 1rem; border:1px solid var(--vc-gray-200); border-radius:var(--vc-radius-pill); font-size:0.88rem; font-family:var(--vc-font); background:var(--vc-white); color:var(--vc-gray-900); outline:none; transition:border-color var(--vc-transition); }
.voy-input-bar input[type="text"]:focus { border-color:var(--vc-purple-400) !important; }
.voy-input-bar input[type="text"]::placeholder { color:var(--vc-gray-300); }

.voy-btn-send { width:42px!important; height:42px!important; min-width:42px; padding:0!important; border-radius:50%!important; background:var(--vc-purple-600)!important; color:var(--vc-white)!important; border:none!important; display:flex!important; align-items:center; justify-content:center; cursor:pointer; transition:background var(--vc-transition),transform var(--vc-transition); font-size:0; overflow:hidden; }
.voy-btn-send::after { content:''; display:block; width:18px; height:18px; background:var(--vc-white); mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E") center/contain no-repeat; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E") center/contain no-repeat; }
.voy-btn-send:hover:not(:disabled) { background:var(--vc-purple-800)!important; transform:scale(1.04); }
.voy-btn-send:active:not(:disabled) { transform:scale(0.96); }

/* ── Buttons ── */
.voy-btn { display:inline-flex; align-items:center; justify-content:center; padding:0.45rem 1rem; border:none; border-radius:var(--vc-radius-sm); font-size:18px; font-weight:500; font-family: 'Poly'; cursor:pointer; transition:all var(--vc-transition); white-space:nowrap; letter-spacing:0.01em; }
.voy-btn:disabled { opacity:0.45; cursor:not-allowed; }
.voy-btn-primary { background:var(--vc-purple-600); color:var(--vc-white); }
.voy-btn-primary:hover:not(:disabled) { background:var(--vc-purple-800); }
.voy-btn-danger { background:var(--vc-red-500); color:var(--vc-white); }
.voy-btn-danger:hover:not(:disabled) { background:var(--vc-red-600); }

/* ── End overlay ── */
.voy-overlay { position:absolute; inset:0; background:rgba(30,27,46,0.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; z-index:100; animation:voy-fade-in 0.3s ease; }
@keyframes voy-fade-in { from{opacity:0} to{opacity:1} }
.voy-overlay-content { background:var(--vc-white); padding:2rem 2.5rem; border-radius:var(--vc-radius); box-shadow:0 8px 40px rgba(38,33,92,0.15); text-align:center; max-width:340px; width:90%; }
.voy-overlay-content h3 { margin:0 0 1rem; color:var(--vc-purple-900); font-weight:500; font-size:1.05rem; }
.voy-overlay-content p { margin:0.35rem 0; font-size:0.9rem; color:var(--vc-gray-700); }
.voy-overlay-content strong { color:var(--vc-gray-900); }
.voy-overlay-content .voy-btn { margin-top:1.25rem; }

/* ── Incoming alert ── */
.voy-incoming-alert { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; animation:voy-slide-up 0.4s ease; }
@keyframes voy-slide-up { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.voy-incoming-content { background:var(--vc-white); border:2px solid var(--vc-purple-600); border-radius:var(--vc-radius); padding:1rem 1.5rem; box-shadow:0 8px 32px rgba(83,74,183,0.18); display:flex; align-items:center; gap:0.75rem; }
.voy-incoming-content p {
    margin: 0 !important;
    font-size: 18px !important;
    font-family: 'Poly' !important;
    color: var(--vc-gray-700);
}
.voy-incoming-icon { font-size:1.6rem; animation:voy-ring 0.6s ease infinite alternate; }
@keyframes voy-ring { from{transform:rotate(-10deg)} to{transform:rotate(10deg)} }

/* ── Toggle switch ── */
.voy-toggle-switch { position:relative; display:inline-block; width:38px; height:20px; }
.voy-toggle-switch input { opacity:0; width:0; height:0; }
.voy-toggle-slider { position:absolute; cursor:pointer; inset:0; background:rgba(255,255,255,0.2); border-radius:20px; transition:var(--vc-transition); }
.voy-toggle-slider::before { content:''; position:absolute; height:14px; width:14px; left:3px; bottom:3px; background:var(--vc-white); border-radius:50%; transition:var(--vc-transition); }
.voy-toggle-switch input:checked + .voy-toggle-slider { background:#1D9E75; }
.voy-toggle-switch input:checked + .voy-toggle-slider::before { transform:translateX(18px); }
.voy-status-online { color:#FFF; font-weight:500; font-size:16px; }
.voy-status-offline { color:rgba(255,255,255,0.45); font-size:0.82rem; }
.voy-status-busy { color:#FAC775; font-weight:500; font-size:0.82rem; }

/* ── Responsive ── */
@media (max-width:600px) {
  .voy-chat-app { border-radius:0; max-width:100%; border:none; }
  .voy-chat-session-header { flex-direction:column; align-items:flex-start; gap:0.4rem; }
  .voy-chat-meta { width:100%; justify-content:space-between; }
  .voy-messages-container { height:300px; }
  .voy-voyant-card { flex-wrap:wrap; }
  .voy-voyant-card .voy-btn { width:100%; margin-top:0.3rem; }
  .voy-overlay-content { padding:1.5rem; }
  .voy-incoming-alert { bottom:0.75rem; right:0.75rem; left:0.75rem; }
  .voy-stats-grid { grid-template-columns:1fr; }
  .voy-stat-card { flex-direction:row; align-items:center; justify-content:space-between; }
  .voy-how-steps { flex-wrap:wrap; gap:0.5rem; }
  .voy-how-step { flex:1 1 45%; min-width:120px; }
}

/* ── Emoji picker ── */
.voy-emoji-btn { width:42px!important; height:42px!important; min-width:42px; padding:0!important; border-radius:50%!important; background:var(--vc-gray-50)!important; border:1px solid var(--vc-gray-200)!important; font-size:1.2rem; cursor:pointer; display:flex!important; align-items:center; justify-content:center; transition:background var(--vc-transition),transform var(--vc-transition); }
.voy-emoji-btn:hover { background:var(--vc-gray-100)!important; transform:scale(1.06); }
.voy-emoji-panel { display:grid; grid-template-columns:repeat(15,1fr); gap:2px; padding:0.5rem; background:var(--vc-white); border:1px solid var(--vc-gray-200); border-radius:var(--vc-radius-sm); max-height:160px; overflow-y:auto; }
.voy-emoji-item { width:32px; height:32px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; cursor:pointer; border-radius:6px; transition:background 0.15s; }
.voy-emoji-item:hover { background:var(--vc-purple-50); }


/* ── SIZE Emoji picker ── */
img.wp-smiley, img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 20px !important;
    width: 20px !important;
    margin: 0 0.07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}

@media (max-width:600px) {
  .voy-emoji-panel { grid-template-columns:repeat(8,1fr); }
  .voy-emoji-item { width:28px; height:28px; font-size:1rem; }
}

/* ── Report button & modal ── */
.voy-report-btn { width:32px; height:32px; min-width:32px; padding:0; border-radius:50%; background:transparent; border:1px solid var(--vc-gray-200); font-size:0.85rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all var(--vc-transition); color:var(--vc-gray-500); margin-left:0.5rem; }
.voy-report-btn:hover { border-color:var(--vc-red-500); color:var(--vc-red-500); background:rgba(226,75,74,0.05); }
.voy-report-btn:disabled { cursor:not-allowed; }

.voy-report-overlay { position:fixed; inset:0; background:rgba(30,27,46,0.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; z-index:100001; }
.voy-report-modal { background:var(--vc-white); border-radius:var(--vc-radius); max-width:420px; width:92%; box-shadow:0 8px 40px rgba(38,33,92,0.15); overflow:hidden; }
.voy-report-modal-header { padding:1rem 1.25rem; font-weight:500; font-size:0.95rem; border-bottom:1px solid var(--vc-gray-200); color:var(--vc-gray-900); }
.voy-report-modal-body { padding:1rem 1.25rem; }
.voy-report-modal-footer { padding:0.75rem 1.25rem; border-top:1px solid var(--vc-gray-200); display:flex; justify-content:flex-end; gap:0.5rem; }
.voy-report-option { display:block; padding:0.4rem 0; font-size:0.85rem; color:var(--vc-gray-700); cursor:pointer; }
.voy-report-option input { margin-right:0.5rem; accent-color:var(--vc-purple-600); }

/* ── Voyant notes ── */
.voy-note-btn { width:32px; height:32px; min-width:32px; padding:0; border-radius:50%; background:transparent; border:1px solid var(--vc-gray-200); font-size:0.85rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all var(--vc-transition); margin-left:0.35rem; }
.voy-note-btn:hover { border-color:var(--vc-purple-400); background:var(--vc-purple-50); }
.voy-notes-panel { background:var(--vc-purple-50); border:1px solid var(--vc-purple-100); border-radius:var(--vc-radius-sm); padding:0.65rem; margin-top:0.5rem; animation:voy-slide-down 0.2s ease; }
.voy-notes-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.4rem; font-size:0.8rem; color:var(--vc-purple-800); font-weight:500; }
.voy-notes-saved { font-size:0.72rem; color:var(--vc-teal-500); font-weight:400; }
.voy-notes-textarea { width:100%; min-height:70px; max-height:140px; padding:0.5rem; border:1px solid var(--vc-purple-100); border-radius:8px; font-family:var(--vc-font); font-size:0.82rem; color:var(--vc-gray-900); background:var(--vc-white); resize:vertical; outline:none; transition:border-color var(--vc-transition); }
.voy-notes-textarea:focus { border-color:var(--vc-purple-400); }
.voy-notes-textarea::placeholder { color:var(--vc-gray-300); }
/* ── Modern modal (replaces alert/confirm) ── */
.voy-modal-overlay { position:fixed; inset:0; background:rgba(30,27,46,0.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:100002; animation:voy-fade-in 0.2s ease; }
.voy-modal-box { background:var(--vc-white); border-radius:var(--vc-radius); max-width:390px; width:90%; padding:1.75rem 1.5rem 1.25rem; text-align:center; box-shadow:0 12px 48px rgba(38,33,92,0.18); animation:voy-scale-in 0.25s ease; }
.voy-modal-icon { font-size:2rem; margin-bottom:0.5rem; }
.voy-modal-text { font-size:0.95rem; color:var(--vc-gray-700); line-height:1.5; margin:0 0 1.25rem; }
.voy-modal-actions { display:flex; justify-content:center; gap:0.6rem; }
.voy-modal-actions .voy-btn { padding:0.55rem 1.4rem; border-radius:var(--vc-radius-sm); font-size:0.85rem; font-weight:500; cursor:pointer; border:none; transition:all var(--vc-transition); }
.voy-modal-cancel { background:var(--vc-gray-100)!important; color:var(--vc-gray-600)!important; }
.voy-modal-cancel:hover { background:var(--vc-gray-200)!important; }
.voy-modal-ok { min-width:100px; }

/* ── Reconnect banner ── */
.voy-reconnect-banner { padding:0.5rem 1rem; background:#FEF3CD; color:#854F0B; font-size:0.82rem; font-weight:500; text-align:center; display:flex; align-items:center; justify-content:center; gap:0.5rem; animation:voy-slide-down 0.3s ease; }
.voy-reconnect-banner.voy-reconnect-ok { background:#C6F6D5; color:#276749; }
.voy-reconnect-spinner { width:14px; height:14px; border:2px solid #854F0B; border-top-color:transparent; border-radius:50%; display:inline-block; animation:voy-spin 0.8s linear infinite; }
.voy-reconnect-ok .voy-reconnect-spinner { display:none; }
@keyframes voy-spin { to { transform:rotate(360deg); } }