*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  :root{
    --bg-primary:#0b141a;--bg-secondary:#111b21;--bg-chat:#0b141a;
    --bg-bubble-me:#005c4b;--bg-bubble-other:#202c33;--bg-header:#1f2c34;
    --bg-input:#2a3942;--text-primary:#e9edef;--text-secondary:#8696a0;
    --accent:#00a884;--accent-hover:#00c49a;--border:#2a3942;
    --shadow:0 2px 12px rgba(0,0,0,.5);--bubble-radius:8px;
    --date-bg:#182229;--date-text:#8696a0;
    --scrollbar-thumb:#374045;--scrollbar-track:transparent;
  }
  html,body{height:100%;font-family:'Poppins',sans-serif;background:var(--bg-primary);color:var(--text-primary)}
  body{overflow:hidden}
  ::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--scrollbar-track)}
  ::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px}
  ::-webkit-scrollbar-thumb:hover{background:#4a5568}

  /* UPLOAD */
  #upload-screen{
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    height:100%;gap:0;animation:fadeIn .6s ease;position:relative;
    overflow-x:hidden;overflow-y:auto;
    background:radial-gradient(ellipse at 60% 20%, rgba(0,168,132,.08) 0%, transparent 60%),
               radial-gradient(ellipse at 10% 80%, rgba(83,189,235,.06) 0%, transparent 50%),
               var(--bg-primary);
  }
  /* Partículas de fundo animadas */
  #upload-screen::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(0,168,132,.07) 0%, transparent 30%),
      radial-gradient(circle at 80% 70%, rgba(83,189,235,.05) 0%, transparent 25%),
      radial-gradient(circle at 50% 90%, rgba(168,85,247,.04) 0%, transparent 30%);
    animation:bgShift 8s ease-in-out infinite alternate;
  }
  @keyframes bgShift{
    from{transform:scale(1) translateY(0)}
    to{transform:scale(1.05) translateY(-10px)}
  }

  .upload-inner{display:flex;flex-direction:column;align-items:center;gap:0;position:relative;z-index:1;width:100%;max-width:520px;padding:32px 24px;margin:auto 0;flex-shrink:0}

  /* Logo/ícone */
  .upload-logo-wrap{position:relative;margin-bottom:28px}
  .upload-logo{
    width:88px;height:88px;border-radius:24px;
    background:linear-gradient(135deg,#00a884 0%,#00c49a 50%,#53bdeb 100%);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 12px rgba(0,168,132,.08),0 0 0 24px rgba(0,168,132,.04),0 20px 60px rgba(0,168,132,.35);
    animation:logoPulse 3s ease-in-out infinite;
    position:relative;
  }
  .upload-logo svg{width:46px;height:46px;fill:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
  .upload-logo-badge{
    position:absolute;bottom:-8px;right:-8px;
    width:26px;height:26px;border-radius:50%;
    background:linear-gradient(135deg,#a855f7,#6366f1);
    display:flex;align-items:center;justify-content:center;
    font-size:13px;
    box-shadow:0 2px 8px rgba(168,85,247,.5);
    border:2px solid var(--bg-primary);
  }
  @keyframes logoPulse{
    0%,100%{box-shadow:0 0 0 12px rgba(0,168,132,.08),0 0 0 24px rgba(0,168,132,.04),0 20px 60px rgba(0,168,132,.35)}
    50%{box-shadow:0 0 0 16px rgba(0,168,132,.06),0 0 0 32px rgba(0,168,132,.02),0 20px 80px rgba(0,168,132,.5)}
  }

  /* Título */
  .upload-brand{text-align:center;margin-bottom:6px}
  .upload-brand .brand-name{
    font-size:38px;font-weight:800;letter-spacing:-1.5px;line-height:1;
    background:linear-gradient(135deg,#e9edef 0%,#00a884 40%,#53bdeb 70%,#a855f7 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    filter:drop-shadow(0 0 30px rgba(0,168,132,.2));
  }
  .upload-brand .brand-name span{
    background:linear-gradient(135deg,#00a884,#53bdeb);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  }
  .upload-brand .brand-tagline{
    font-size:13px;color:var(--text-secondary);margin-top:6px;letter-spacing:.3px;
    font-weight:400;
  }
  .upload-brand .brand-tagline em{color:var(--accent);font-style:normal;font-weight:600}

  /* Features pills */
  .upload-features{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-bottom:28px}
  .upload-feature-pill{
    display:flex;align-items:center;gap:6px;
    padding:6px 13px;border-radius:20px;font-size:11px;font-weight:600;
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
    color:var(--text-secondary);letter-spacing:.2px;
    transition:all .3s;
  }
  .upload-feature-pill:hover{border-color:var(--accent);color:var(--accent);background:rgba(0,168,132,.06)}
  .upload-feature-pill .pill-icon{font-size:13px}

  /* Drop zone */
  .drop-zone{
    width:100%;padding:36px 28px;
    border:2px dashed rgba(255,255,255,.1);
    border-radius:20px;text-align:center;cursor:pointer;
    transition:all .35s cubic-bezier(.4,0,.2,1);
    background:rgba(255,255,255,.02);
    position:relative;overflow:hidden;
    margin-bottom:20px;
  }
  .drop-zone::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(0,168,132,.05),rgba(83,189,235,.03));
    opacity:0;transition:opacity .35s;
  }
  .drop-zone:hover::before,.drop-zone.dragover::before{opacity:1}
  .drop-zone:hover,.drop-zone.dragover{
    border-color:var(--accent);
    transform:translateY(-3px);
    box-shadow:0 12px 40px rgba(0,168,132,.15),inset 0 0 0 1px rgba(0,168,132,.1);
  }
  .dz-icon{
    width:56px;height:56px;border-radius:16px;
    background:rgba(0,168,132,.1);border:1px solid rgba(0,168,132,.2);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 14px;transition:all .3s;
  }
  .drop-zone:hover .dz-icon,.drop-zone.dragover .dz-icon{
    background:rgba(0,168,132,.2);border-color:var(--accent);
    transform:scale(1.05);
  }
  .dz-icon svg{width:28px;height:28px;fill:var(--accent);transition:fill .3s}
  .dz-title{font-size:15px;font-weight:700;color:var(--text-primary);margin-bottom:5px}
  .dz-sub{font-size:12px;color:var(--text-secondary);line-height:1.5}
  .dz-sub span{
    display:inline-block;margin-top:8px;padding:3px 10px;
    border-radius:6px;background:rgba(0,168,132,.1);color:var(--accent);
    font-size:11px;font-weight:600;
  }

  /* Privacy note */
  .upload-privacy{
    display:flex;align-items:center;gap:8px;
    padding:10px 16px;border-radius:12px;
    background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
    font-size:11px;color:var(--text-secondary);text-align:left;line-height:1.4;
  }
  .upload-privacy .priv-icon{font-size:18px;flex-shrink:0}
  .upload-privacy strong{color:var(--text-primary);font-weight:600}

  #file-input{display:none}

  /* USER SELECT */
  #user-select-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:1000;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
  #user-select-overlay.show{display:flex;animation:fadeIn .3s ease}
  .user-select-modal{background:var(--bg-secondary);border-radius:16px;padding:28px;width:400px;max-width:90vw;box-shadow:var(--shadow);animation:slideUp .3s ease;max-height:80vh;display:flex;flex-direction:column}
  .user-select-modal h2{font-size:20px;font-weight:700;margin-bottom:6px}
  .user-select-modal p{color:var(--text-secondary);font-size:13px;margin-bottom:18px;line-height:1.5}
  .user-list{display:flex;flex-direction:column;gap:6px;overflow-y:auto;max-height:50vh;padding-right:4px}
  .user-item{padding:12px 14px;border-radius:10px;cursor:pointer;background:var(--bg-input);transition:all .2s;display:flex;align-items:center;gap:12px;border:2px solid transparent}
  .user-item:hover{background:rgba(0,168,132,.1);border-color:var(--accent)}
  .user-item .avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:#fff;flex-shrink:0}
  .user-item .info{flex:1;min-width:0}
  .user-item .info .name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .user-item .info .count{color:var(--text-secondary);font-size:12px;margin-top:2px}

  /* CHAT SCREEN */
  #chat-screen{display:none;height:100%;flex-direction:column}
  #chat-screen.show{display:flex}

  /* HEADER */
  .chat-header{background:var(--bg-header);padding:10px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border);flex-shrink:0;z-index:10}
  .chat-header .back-btn{background:none;border:none;cursor:pointer;padding:6px;border-radius:50%;transition:background .2s;display:flex;align-items:center}
  .chat-header .back-btn:hover{background:var(--bg-input)}
  .chat-header .back-btn svg{width:22px;height:22px;fill:var(--text-secondary)}
  .chat-avatar{width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:#fff;flex-shrink:0}
  .chat-header .chat-info{flex:1;min-width:0}
  .chat-header .chat-title{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .chat-header .chat-subtitle{font-size:12px;color:var(--text-secondary);margin-top:1px}
  .header-actions{display:flex;gap:2px}
  .header-btn{background:none;border:none;cursor:pointer;padding:8px;border-radius:50%;transition:background .2s;display:flex;align-items:center}
  .header-btn:hover{background:var(--bg-input)}
  .header-btn svg{width:21px;height:21px;fill:var(--text-secondary);transition:fill .2s}
  .header-btn.active{background:rgba(0,168,132,.15)}
  .header-btn.active svg{fill:var(--accent)}

  /* SEARCH PANEL */
  .search-panel{display:none;background:var(--bg-header);padding:8px 16px;border-bottom:1px solid var(--border);flex-shrink:0;animation:slideDown .2s ease}
  .search-panel.show{display:block}
  .search-row{display:flex;gap:8px;align-items:center}
  .search-input-wrap{flex:1;display:flex;align-items:center;background:var(--bg-input);border-radius:8px;overflow:hidden}
  .search-input-wrap svg{width:18px;height:18px;fill:var(--text-secondary);margin-left:12px;flex-shrink:0}
  .search-input-wrap input{flex:1;background:none;border:none;outline:none;padding:10px 12px;font-size:14px;color:var(--text-primary);font-family:inherit}
  .search-input-wrap input::placeholder{color:var(--text-secondary)}
  .search-nav{display:flex;align-items:center;gap:2px;color:var(--text-secondary);font-size:12px;margin-right:6px;white-space:nowrap}
  .search-nav button{background:none;border:none;cursor:pointer;padding:4px;border-radius:50%;display:flex;align-items:center;transition:background .2s}
  .search-nav button:hover{background:var(--bg-input)}
  .search-nav button svg{width:18px;height:18px;fill:var(--text-secondary)}
  .search-close{background:none;border:none;cursor:pointer;padding:6px;border-radius:50%;display:flex;align-items:center;transition:background .2s}
  .search-close:hover{background:var(--bg-input)}
  .search-close svg{width:20px;height:20px;fill:var(--text-secondary)}

  /* FILTERS PANEL */
  .filters-panel{display:none;background:var(--bg-header);padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0;animation:slideDown .2s ease}
  .filters-panel.show{display:block}
  .filters-title{font-size:11px;font-weight:700;color:var(--text-secondary);margin-bottom:10px;text-transform:uppercase;letter-spacing:.6px}
  .filters-grid{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
  .filter-group{display:flex;flex-direction:column;gap:4px}
  .filter-group label{font-size:11px;color:var(--text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
  .filter-group select,.filter-group input{background:var(--bg-input);border:1px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--text-primary);font-size:13px;font-family:inherit;outline:none;transition:border-color .2s;min-width:140px}
  .filter-group select:focus,.filter-group input:focus{border-color:var(--accent)}
  .filter-group select option{background:var(--bg-secondary)}
  .filter-btn{padding:8px 16px;border-radius:8px;border:none;cursor:pointer;font-size:13px;font-weight:600;font-family:inherit;transition:all .2s}
  .filter-apply{background:var(--accent);color:#fff}
  .filter-apply:hover{background:var(--accent-hover)}
  .filter-clear{background:var(--bg-input);color:var(--text-secondary)}
  .filter-clear:hover{color:var(--text-primary)}
  .active-filters{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
  .active-filter-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:rgba(0,168,132,.15);color:var(--accent);border-radius:20px;font-size:12px;font-weight:500}
  .active-filter-tag button{background:none;border:none;cursor:pointer;display:flex;align-items:center;padding:0}
  .active-filter-tag button svg{width:14px;height:14px;fill:var(--accent)}
  .order-toggle{display:flex;background:var(--bg-input);border-radius:8px;overflow:hidden;border:1px solid var(--border)}
  .order-toggle button{background:none;border:none;padding:8px 12px;color:var(--text-secondary);cursor:pointer;font-size:12px;font-family:inherit;transition:all .2s;font-weight:500}
  .order-toggle button.active{background:var(--accent);color:#fff}

  /* STATS OVERLAY */
  .stats-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:100;backdrop-filter:blur(8px)}
  .stats-overlay.show{display:flex;align-items:center;justify-content:center;padding:12px}
  .stats-modal{background:var(--bg-secondary);border-radius:16px;width:1080px;max-width:100%;max-height:96vh;display:flex;flex-direction:column;box-shadow:0 8px 60px rgba(0,0,0,.8);animation:slideUp .3s ease;overflow:hidden}
  .stats-modal-header{display:flex;flex-direction:column;gap:10px;padding:14px 18px 10px;background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-shrink:0}
  .stats-modal-header-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
  .stats-header-actions{display:flex;align-items:center;gap:6px}
  .stats-modal-header h2{font-size:16px;font-weight:700;margin:0}
  .stats-action-btn{border:1px solid var(--border);background:var(--bg-input);color:var(--text-secondary);font-size:11px;font-weight:700;padding:6px 10px;border-radius:8px;cursor:pointer;transition:all .2s}
  .stats-action-btn:hover{border-color:var(--accent);color:var(--accent)}
  .stats-action-btn:disabled{opacity:.6;cursor:not-allowed}
  .stats-tabs-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .stats-tabs-wrap::-webkit-scrollbar{height:3px}
  .stats-tabs-wrap::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:2px}
  .stats-tabs{display:flex;gap:3px;background:var(--bg-input);border-radius:10px;padding:3px;min-width:max-content}
  .stats-tab{background:none;border:none;padding:6px 13px;color:var(--text-secondary);cursor:pointer;font-size:12px;font-family:inherit;font-weight:600;border-radius:7px;transition:all .2s;white-space:nowrap;flex-shrink:0}
  .stats-tab:hover{color:var(--text-primary);background:rgba(255,255,255,.05)}
  .stats-tab.active{background:var(--accent);color:#fff}
  .stats-close{background:none;border:none;cursor:pointer;padding:6px;border-radius:50%;display:flex;transition:background .2s;flex-shrink:0}
  .stats-close:hover{background:var(--bg-input)}
  .stats-close svg{width:20px;height:20px;fill:var(--text-secondary)}
  .stats-body{padding:16px 18px 24px;overflow-y:auto;flex:1;overflow-x:hidden}
  .stats-tab-content{display:none;flex-direction:column;gap:12px;min-width:0}
  .stats-tab-content.active{display:flex}
  .stats-category table{table-layout:fixed}
  .stats-category th,.stats-category td{word-break:break-word}

  /* STAT CARDS */
  .stat-card-mini{background:var(--bg-input);padding:12px 10px;border-radius:11px;text-align:center;border:1px solid var(--border);transition:all .3s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;position:relative}
  .stat-card-mini:hover{transform:translateY(-2px);border-color:rgba(0,168,132,.3);box-shadow:0 10px 20px rgba(0,0,0,.2)}
  .stat-card-mini.glow-green{box-shadow:0 0 20px rgba(0,168,132,0.15);border-color:rgba(0,168,132,0.3)}
  .stat-card-mini.glow-purple{box-shadow:0 0 20px rgba(168,85,247,0.15);border-color:rgba(168,85,247,0.3)}
  .stat-card-mini.glow-blue{box-shadow:0 0 20px rgba(83,189,235,0.15);border-color:rgba(83,189,235,0.3)}
  .stat-card-mini.glow-orange{box-shadow:0 0 20px rgba(255,149,0,0.15);border-color:rgba(255,149,0,0.3)}
  .stat-card-mini.glow-pink{box-shadow:0 0 20px rgba(228,77,165,0.15);border-color:rgba(228,77,165,0.3)}
  .stat-card-mini.glow-cyan{box-shadow:0 0 20px rgba(6,182,212,0.15);border-color:rgba(6,182,212,0.3)}
  .stat-card-mini.glow-lime{box-shadow:0 0 20px rgba(132,204,22,0.15);border-color:rgba(132,204,22,0.3)}
  .stat-card-mini.glow-red{box-shadow:0 0 20px rgba(239,68,68,0.15);border-color:rgba(239,68,68,0.3)}
  .stat-card-mini .stat-val{font-size:19px;font-weight:800;color:var(--accent);line-height:1.1;margin-bottom:5px;word-break:break-word;max-width:100%}
  .stat-card-mini .stat-lbl{font-size:10px;color:var(--text-secondary);font-weight:700;text-transform:uppercase;letter-spacing:.4px;line-height:1.3;text-align:center}
  .stat-card-mini .stat-sub{font-size:9px;color:var(--text-secondary);margin-top:3px;font-style:italic;line-height:1.3}
  .overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:25px;min-width:0}

  /* STATS CATEGORY */
  .stats-category{background:var(--bg-primary);border-radius:11px;padding:14px 16px;border:1px solid var(--border);overflow:hidden}
  .stats-cat-title{font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:12px;display:flex;align-items:center;gap:7px;padding-bottom:9px;border-bottom:1px solid var(--border);flex-shrink:0}
  .stats-cat-body{display:flex;flex-direction:column;gap:10px;min-width:0}
  .stats-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}
  .stats-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;min-width:0}
  @media(max-width:700px){
    .stats-row-2,.stats-row-3{grid-template-columns:1fr}
    .bar-val{flex:0 0 88px;font-size:9px}
    .bar-label{flex:0 0 72px}
    .stats-category{padding:12px}
    .trophy-bar-label{flex:0 0 86px}
    .trophy-bar-val{flex:0 0 70px;font-size:9px}
    .trophy-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .personality-badge{min-width:0}
    .stats-category table{font-size:10px}
  }

  /* BAR CHART */
  .stats-bar-chart{display:flex;flex-direction:column;gap:10px}
  .stats-bar-row{display:flex;align-items:center;gap:12px;min-width:0}
  .bar-label{flex:0 0 145px;color:var(--text-primary);text-align:right;white-space:normal;line-height:1.2;font-size:11px;font-weight:600;word-break:break-word;display:flex;align-items:center;justify-content:flex-end;min-height:18px}
  .bar-track{flex:1;height:16px;background:var(--bg-secondary);border-radius:6px;overflow:hidden;min-width:40px}
  .bar-fill{height:100%;border-radius:6px;transition:width .8s cubic-bezier(.16, 1, 0.3, 1);min-width:2px}
  .bar-val{flex:0 0 110px;color:var(--text-secondary);font-size:10px;font-weight:600;white-space:normal;line-height:1.25;overflow-wrap:anywhere;margin-left:4px}

  .stats-category table{width:100%;border-collapse:collapse;table-layout:fixed}
  .stats-category th,.stats-category td{word-break:break-word;vertical-align:top}

  /* CHIPS */
  .stats-list{display:flex;flex-wrap:wrap;gap:5px}
  .stats-chip{padding:4px 9px;background:var(--bg-input);border-radius:7px;font-size:12px;border:1px solid var(--border)}
  .stats-chip small{color:var(--text-secondary);margin-left:3px}
  .stats-chip.rank-1{border-color:gold;color:gold}
  .stats-chip.rank-2{border-color:silver;color:silver}
  .stats-chip.rank-3{border-color:#cd7f32;color:#cd7f32}

  /* MARATHON */
  .marathon-card{background:linear-gradient(135deg,rgba(168,85,247,.12),rgba(0,168,132,.08));border:1px solid rgba(168,85,247,.3);border-radius:12px;padding:14px;margin-bottom:10px}
  .marathon-card:last-child{margin-bottom:0}
  .marathon-card .mc-title{font-size:13px;font-weight:700;color:#a855f7;margin-bottom:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .marathon-card .mc-badge{font-size:10px;padding:2px 8px;border-radius:20px;font-weight:700;letter-spacing:.3px}
  .marathon-card .mc-badge.crossed{background:rgba(239,68,68,.2);color:#ef4444}
  .marathon-card .mc-badge.late{background:rgba(168,85,247,.2);color:#a855f7}
  .marathon-card .mc-badge.dawn{background:rgba(99,102,241,.2);color:#6366f1}
  .marathon-card .mc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:5px;margin-bottom:8px}
  .marathon-card .mc-item{background:rgba(0,0,0,.25);border-radius:7px;padding:6px 9px}
  .marathon-card .mc-item-label{font-size:10px;color:var(--text-secondary);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}
  .marathon-card .mc-item-val{font-size:13px;font-weight:700;color:var(--accent)}
  .marathon-card .mc-story{font-size:11px;color:var(--text-secondary);background:rgba(0,0,0,.2);border-radius:6px;padding:8px 10px;line-height:1.6;margin-top:4px}
  .marathon-card .mc-story strong{color:var(--text-primary)}
  .marathon-card .mc-breakdown{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
  .marathon-card .mc-sender-pill{font-size:11px;padding:3px 9px;border-radius:20px;background:rgba(0,168,132,.15);color:var(--accent);font-weight:600}

  /* TROPHY CARD */
  .trophy-section{display:flex;flex-direction:column;gap:12px}
  .trophy-participant-card{background:var(--bg-input);border-radius:12px;padding:16px;border:1px solid var(--border);transition:border-color .2s}
  .trophy-participant-card:hover{border-color:var(--accent)}
  .trophy-header{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border)}
  .trophy-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:#fff;flex-shrink:0}
  .trophy-name{font-size:15px;font-weight:700;color:var(--text-primary)}
  .trophy-tag{font-size:11px;color:var(--accent);font-weight:600;margin-top:2px}
  .trophy-stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px;margin-bottom:10px;min-width:0}
  .trophy-stat{background:var(--bg-primary);padding:7px 10px;border-radius:8px;text-align:center;min-width:0}
  .trophy-stat-val{font-size:15px;font-weight:800;color:var(--accent);line-height:1.1}
  .trophy-stat-lbl{font-size:9px;color:var(--text-secondary);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-top:3px}
  .trophy-badges{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
  .trophy-badge-pill{font-size:11px;padding:4px 10px;border-radius:20px;background:rgba(0,168,132,.1);border:1px solid rgba(0,168,132,.25);color:var(--accent);font-weight:600;display:flex;align-items:center;gap:4px}
  .trophy-bars{display:flex;flex-direction:column;gap:3px}
  .trophy-bar-row{display:flex;align-items:flex-start;gap:6px;font-size:11px;min-width:0}
  .trophy-bar-label{flex:0 0 110px;color:var(--text-secondary);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .trophy-bar-track{flex:1;height:12px;background:var(--bg-secondary);border-radius:3px;overflow:hidden}
  .trophy-bar-fill{height:100%;border-radius:3px;transition:width .6s}
  .trophy-bar-val{flex:0 0 80px;color:var(--text-secondary);font-size:10px;white-space:normal;overflow-wrap:anywhere;line-height:1.25}

  /* HEATMAP */
  .heatmap-wrap{overflow-x:auto;margin-top:4px}
  .heatmap-grid{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;min-width:500px}
  .heatmap-cell{height:22px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:rgba(255,255,255,.7);cursor:default;transition:transform .15s}
  .heatmap-cell:hover{transform:scale(1.1)}

  /* SECTION SUBTITLE */
  .sec-note{font-size:11px;color:var(--text-secondary);margin-bottom:8px;line-height:1.5}

  /* TIMELINE */
  .timeline-months,.timeline-days{display:flex;flex-wrap:wrap;gap:6px}
  .timeline-month-btn,.timeline-day-btn{border:1px solid var(--border);background:var(--bg-input);color:var(--text-primary);padding:6px 10px;border-radius:8px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s}
  .timeline-month-btn:hover,.timeline-day-btn:hover{border-color:var(--accent);color:var(--accent)}
  .timeline-day-btn{padding:5px 9px;font-size:10px}
  .timeline-month-count{color:var(--text-secondary);font-size:10px;margin-left:4px}

  /* MESSAGES AREA */
  .messages-area{flex:1;overflow-y:auto;padding:8px 56px;background:var(--bg-chat);background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.015'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
  @media(max-width:768px){.messages-area{padding:8px 12px}}
  .date-separator{display:flex;justify-content:center;margin:14px 0}
  .date-separator span{background:var(--date-bg);color:var(--date-text);padding:5px 14px;border-radius:8px;font-size:12px;font-weight:500}
  .msg-row{display:flex;margin-bottom:2px;padding:0 4px}
  .msg-row.me{justify-content:flex-end}
  .msg-row.other{justify-content:flex-start}
  .msg-bubble{max-width:65%;padding:6px 9px;border-radius:var(--bubble-radius);position:relative;word-wrap:break-word;line-height:1.45;font-size:14px;box-shadow:0 1px 1px rgba(0,0,0,.15)}
  .msg-row.me .msg-bubble{background:var(--bg-bubble-me);border-top-right-radius:2px}
  .msg-row.other .msg-bubble{background:var(--bg-bubble-other);border-top-left-radius:2px}
  .msg-row.first-in-group.me .msg-bubble{border-top-right-radius:var(--bubble-radius)}
  .msg-row.first-in-group.other .msg-bubble{border-top-left-radius:var(--bubble-radius)}
  .msg-row:not(.first-in-group){margin-bottom:1px}
  .msg-bubble .msg-sender{font-size:12.5px;font-weight:700;color:#00a884;margin-bottom:3px}
  .msg-row.me .msg-bubble .msg-sender{display:none}
  .msg-bubble .msg-text{color:var(--text-primary);white-space:pre-wrap;word-break:break-word}
  .msg-bubble .msg-media{color:var(--text-secondary);font-style:italic;font-size:13px;display:flex;align-items:center;gap:6px}
  .msg-bubble .msg-media svg{width:16px;height:16px;fill:var(--text-secondary);flex-shrink:0}
  .msg-time-wrap{display:flex;justify-content:flex-end;margin-top:3px}
  .msg-bubble .msg-time{font-size:11px;color:var(--text-secondary)}
  .msg-row.me .msg-bubble .msg-time{color:rgba(255,255,255,.5)}
  .msg-row.system{justify-content:center;margin:10px 0}
  .msg-row.system .msg-bubble{background:var(--date-bg);max-width:80%;text-align:center;border-radius:8px;padding:6px 14px}
  .msg-row.system .msg-bubble .msg-text{color:var(--date-text);font-size:12.5px}
  .search-hl{background:rgba(255,213,0,.35);border-radius:2px;padding:0 1px}
  .search-hl-current{background:rgba(255,140,0,.6);border-radius:2px;padding:0 1px}
  .no-results{display:none;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:12px}
  .no-results.show{display:flex}
  .no-results svg{width:56px;height:56px;fill:var(--text-secondary);opacity:.35}
  .no-results p{color:var(--text-secondary);font-size:14px}
  .load-more-wrap{display:flex;justify-content:center;padding:14px}
  .load-more-btn{background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border);border-radius:10px;padding:9px 24px;cursor:pointer;font-size:13px;font-family:inherit;transition:all .2s;font-weight:500}
  .load-more-btn:hover{border-color:var(--accent);color:var(--accent)}
  .scroll-bottom{position:fixed;bottom:20px;right:20px;width:42px;height:42px;background:var(--bg-header);border-radius:50%;border:none;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:var(--shadow);transition:all .2s;z-index:5}
  .scroll-bottom:hover{background:var(--bg-input);transform:scale(1.05)}
  .scroll-bottom svg{width:20px;height:20px;fill:var(--text-secondary)}
  .scroll-bottom.show{display:flex}
  .loading{display:none;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px}
  .loading.show{display:flex}
  .spinner{width:34px;height:34px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}

  /* TOOLTIP */
  .tooltip{position:relative}
  .tooltip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:rgba(0,0,0,.9);color:#fff;padding:4px 8px;border-radius:5px;font-size:11px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s;z-index:999}
  .tooltip:hover::after{opacity:1}
  /* Faz os tooltips do cabeçalho abrirem para baixo, evitando que o fundo preto seja cortado e gere o bug visual */
  .chat-header .tooltip::after, .search-panel .tooltip::after { bottom:auto; top:calc(100% + 6px); }

  /* HIGHLIGHT BOX */
  .highlight-box{background:var(--bg-input);padding:12px;border-radius:10px;border-left:3px solid var(--accent)}
  .highlight-box-blue{background:var(--bg-input);padding:12px;border-radius:10px;border-left:3px solid #53bdeb}
  .highlight-box-purple{background:var(--bg-input);padding:12px;border-radius:10px;border-left:3px solid #a855f7}
  .highlight-box-orange{background:var(--bg-input);padding:12px;border-radius:10px;border-left:3px solid #ff9500}
  .hb-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-secondary);margin-bottom:4px}
  .hb-name{font-size:12px;color:var(--accent);font-weight:600;margin-bottom:3px}
  .hb-text{font-size:12px;color:var(--text-primary);opacity:.85;max-height:70px;overflow:hidden}

  /* PERSONALITY BADGES */
  .personality-grid{display:flex;flex-wrap:wrap;gap:8px}
  .personality-badge{display:flex;align-items:center;gap:8px;background:var(--bg-input);padding:10px 14px;border-radius:10px;border:1px solid var(--border);flex:1;min-width:160px}
  .personality-badge .pb-icon{font-size:22px;flex-shrink:0}
  .personality-badge .pb-info .pb-title{font-size:12px;font-weight:700;color:var(--text-primary)}
  .personality-badge .pb-info .pb-name{font-size:11px;color:var(--accent);margin-top:2px}
  .personality-badge .pb-info .pb-desc{font-size:10px;color:var(--text-secondary);margin-top:1px}

  /* WORD CLOUD STYLE */
  .word-cloud{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
  .wc-word{padding:3px 8px;background:var(--bg-input);border-radius:6px;border:1px solid var(--border);cursor:default;transition:transform .15s}
  .wc-word:hover{transform:scale(1.05)}

  /* ANIMATIONS */
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  @keyframes slideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
  @keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
  @keyframes pulse{0%,100%{box-shadow:0 0 40px rgba(0,168,132,.3)}50%{box-shadow:0 0 60px rgba(0,168,132,.5)}}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* Upload screen animated entrance */
  .upload-logo-wrap{animation:uploadEnter .6s cubic-bezier(.34,1.56,.64,1) both}
  .upload-brand{animation:uploadFade .7s .15s ease both}
  .upload-features{animation:uploadFade .7s .25s ease both}
  .drop-zone{animation:uploadFade .7s .35s ease both}
  .upload-privacy{animation:uploadFade .7s .45s ease both}
  @keyframes uploadEnter{
    from{opacity:0;transform:scale(.7) translateY(20px)}
    to{opacity:1;transform:scale(1) translateY(0)}
  }
  @keyframes uploadFade{
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:translateY(0)}
  }

  /* Floating dots decoration */
  #upload-screen .float-dot{
    position:absolute;border-radius:50%;pointer-events:none;opacity:.4;
    animation:floatDot linear infinite;
  }
  @keyframes floatDot{
    0%{transform:translateY(0) rotate(0deg);opacity:.4}
    50%{opacity:.15}
    100%{transform:translateY(-100vh) rotate(720deg);opacity:0}
  }
  @keyframes jumpFlash{0%{outline:2px solid var(--accent)}100%{outline:2px solid transparent}}
  .jump-indicator{animation:jumpFlash 1s ease}

  /* ===== UPLOAD SCREEN RESPONSIVE ===== */
  @media(max-width:520px){
    .upload-inner{padding:24px 16px}
    .upload-logo{width:68px;height:68px;border-radius:18px}
    .upload-logo svg{width:36px;height:36px}
    .upload-logo-badge{width:22px;height:22px;font-size:11px;bottom:-6px;right:-6px}
    .upload-brand .brand-name{font-size:30px;letter-spacing:-1px}
    .upload-brand .brand-tagline{font-size:12px}
    .upload-logo-wrap{margin-bottom:20px}
    .upload-features{gap:5px;margin-bottom:20px}
    .upload-feature-pill{padding:5px 10px;font-size:10px}
    .upload-feature-pill .pill-icon{font-size:11px}
    .drop-zone{padding:28px 20px;margin-bottom:16px}
    .dz-icon{width:48px;height:48px;border-radius:12px;margin-bottom:10px}
    .dz-icon svg{width:24px;height:24px}
    .dz-title{font-size:14px}
    .dz-sub{font-size:11px}
    .upload-privacy{padding:8px 12px;font-size:10px}
    .upload-privacy .priv-icon{font-size:16px}
  }
  @media(max-height:700px){
    .upload-inner{padding:20px 16px}
    .upload-logo-wrap{margin-bottom:16px}
    .upload-logo{width:64px;height:64px;border-radius:16px}
    .upload-logo svg{width:32px;height:32px}
    .upload-brand{margin-bottom:4px}
    .upload-brand .brand-name{font-size:28px}
    .upload-features{margin-bottom:16px}
    .drop-zone{padding:24px 20px;margin-bottom:14px}
    .dz-icon{width:44px;height:44px;margin-bottom:8px}
  }
  @media(max-height:550px){
    .upload-inner{padding:12px 14px}
    .upload-logo-wrap{margin-bottom:10px}
    .upload-logo{width:52px;height:52px;border-radius:14px}
    .upload-logo svg{width:26px;height:26px}
    .upload-logo-badge{width:20px;height:20px;font-size:10px;bottom:-4px;right:-4px}
    .upload-brand .brand-name{font-size:24px}
    .upload-brand .brand-tagline{font-size:11px}
    .upload-features{margin-bottom:10px;gap:4px}
    .upload-feature-pill{padding:4px 8px;font-size:9px}
    .drop-zone{padding:18px 16px;margin-bottom:10px}
    .dz-icon{width:38px;height:38px;border-radius:10px;margin-bottom:6px}
    .dz-icon svg{width:20px;height:20px}
    .dz-title{font-size:13px}
    .dz-sub{font-size:10px}
    .upload-privacy{padding:6px 10px;font-size:9px}
  }

  /* PEAK CARDS (Heated Moments) */
  .peak-card{background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:16px;padding:20px;position:relative;overflow:hidden;transition:all .3s cubic-bezier(0.4,0,0.2,1);flex:1;min-width:250px;max-width:350px}
  .peak-card:hover{transform:translateY(-5px);border-color:rgba(239,68,68,0.5);box-shadow:0 10px 30px -10px rgba(239,68,68,0.2)}
  .peak-card.top-1{background:linear-gradient(135deg, rgba(239,68,68,0.15) 0%, rgba(255,255,255,0.03) 100%);border-color:rgba(239,68,68,0.3)}
  .peak-card .peak-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:15px}
  .peak-card .peak-rank{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;background:rgba(255,255,255,0.1)}
  .peak-card.top-1 .peak-rank{background:#ef4444;color:#fff;box-shadow:0 0 15px rgba(239,68,68,0.4)}
  .peak-card.top-2 .peak-rank{background:#53bdeb;color:#fff}
  .peak-card.top-3 .peak-rank{background:#a855f7;color:#fff}
  .peak-card .peak-val-wrap{text-align:right}
  .peak-card .peak-val{font-size:32px;font-weight:900;color:var(--text-primary);line-height:1}
  .peak-card .peak-unit{font-size:11px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;display:block;margin-top:2px}
  .peak-card .peak-date{font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:4px}
  .peak-card .peak-badge{display:inline-block;padding:3px 8px;border-radius:6px;font-size:10px;font-weight:800;text-transform:uppercase;margin-top:8px}
  .peak-card.top-1 .peak-badge{background:rgba(239,68,68,0.2);color:#ef4444}
  .peak-card .peak-desc{font-size:12px;color:var(--text-secondary);margin-top:12px;display:flex;align-items:center;gap:6px}

  /* ==========================================
     AI ANALYSIS STYLES ✨
     ========================================== */
  .ai-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(11, 20, 26, 0.85);
    z-index: 100;
    backdrop-filter: blur(10px);
    align-items: center;
    justify-content: center;
    padding: 12px;
  }
  .ai-overlay.show {
    display: flex;
    animation: fadeIn .3s ease;
  }
  .ai-modal {
    background: var(--bg-secondary);
    border-radius: 20px;
    width: 1100px;
    max-width: 100%;
    height: 92vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 100px rgba(168, 85, 247, 0.2), 0 0 0 1px rgba(168, 85, 247, 0.15);
    animation: slideUp .35s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
  }
  .ai-modal-header {
    padding: 18px 24px;
    background: rgba(255, 255, 255, 0.01);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .ai-modal-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .ai-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .ai-sparkle-icon {
    font-size: 24px;
    animation: logoPulse 2.5s infinite;
  }
  .ai-header-title h2 {
    font-size: 20px;
    font-weight: 800;
    background: linear-gradient(135deg, #e9edef, #a855f7, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .ai-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    transition: background .2s;
  }
  .ai-close:hover {
    background: var(--bg-input);
  }
  .ai-close svg {
    width: 22px;
    height: 22px;
    fill: var(--text-secondary);
  }

  .ai-modal-body {
    display: flex;
    flex: 1;
    overflow: hidden;
  }

  /* LEFT SIDEBAR: SETUP */
  .ai-setup-panel {
    width: 380px;
    background: rgba(0, 0, 0, 0.15);
    border-right: 1px solid var(--border);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    overflow-y: auto;
    flex-shrink: 0;
  }
  .ai-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .ai-section h3 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-primary);
    letter-spacing: .5px;
  }
  .ai-apikey-wrap {
    display: flex;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .2s;
  }
  .ai-apikey-wrap:focus-within {
    border-color: #a855f7;
  }
  .ai-apikey-wrap input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    padding: 12px 14px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
  }
  .ai-toggle-pw {
    background: none;
    border: none;
    padding: 0 14px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: color .2s;
  }
  .ai-toggle-pw:hover {
    color: var(--text-primary);
  }
  .ai-section-hint {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
  }

  .ai-setup-panel select {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    transition: border-color .2s;
  }
  .ai-setup-panel select:focus {
    border-color: #a855f7;
  }
  .ai-setup-panel select option {
    background: var(--bg-secondary);
  }

  /* Usage tracker */
  .ai-usage-bar-wrap {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .ai-usage-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
  }
  .ai-usage-track {
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
  }
  .ai-usage-fill {
    height: 100%;
    background: linear-gradient(90deg, #a855f7, #6366f1);
    border-radius: 10px;
    transition: width .5s ease;
  }

  /* Date inputs */
  .ai-date-inputs {
    display: flex;
    gap: 12px;
  }
  .ai-date-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .ai-date-group label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
  }
  .ai-date-group input {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color .2s;
  }
  .ai-date-group input:focus {
    border-color: #a855f7;
  }

  .ai-presets {
    display: flex;
    gap: 6px;
    margin-top: 4px;
  }
  .ai-preset-btn {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 6px 4px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
  }
  .ai-preset-btn:hover {
    border-color: #a855f7;
    color: #a855f7;
    background: rgba(168, 85, 247, 0.05);
  }

  .ai-period-info {
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    line-height: 1.4;
    font-weight: 500;
    transition: all .2s;
  }
  .ai-period-info.success {
    background: rgba(0, 168, 132, 0.1);
    border: 1px solid rgba(0, 168, 132, 0.2);
    color: #00a884;
  }
  .ai-period-info.warning {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #ef4444;
  }

  .ai-run-btn {
    background: linear-gradient(135deg, #a855f7, #6366f1);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3);
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: auto;
  }
  .ai-run-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.5);
  }
  .ai-run-btn:active:not(:disabled) {
    transform: translateY(0);
  }
  .ai-run-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
  }

  /* RIGHT SIDE: RESULTS */
  .ai-result-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-primary);
    position: relative;
  }

  .ai-status-state {
    display: none;
    width: 100%;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
  }
  .ai-status-state.active {
    display: flex;
  }

  /* EMPTY STATE */
  #ai-status-empty {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    background-image: radial-gradient(ellipse at 50% 50%, rgba(168, 85, 247, 0.04) 0%, transparent 60%);
  }
  .ai-sparkles-large {
    font-size: 64px;
    margin-bottom: 20px;
    animation: floating 3s ease-in-out infinite;
  }
  #ai-status-empty h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-primary);
  }
  #ai-status-empty p {
    font-size: 13.5px;
    color: var(--text-secondary);
    max-width: 440px;
    line-height: 1.6;
    margin-bottom: 12px;
  }
  .ai-card-hint {
    font-size: 12px !important;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 16px;
    font-style: italic;
    color: var(--text-secondary);
  }

  @keyframes floating {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }

  /* LOADING STATE */
  #ai-status-loading {
    align-items: center;
    justify-content: center;
    padding: 40px;
  }
  .ai-spinner-glow {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #a855f7, #6366f1);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.4);
    animation: spin 1s linear infinite;
    margin-bottom: 24px;
  }
  .ai-spinner-inner {
    width: 100%;
    height: 100%;
    background: var(--bg-secondary);
    border-radius: 50%;
  }
  #ai-status-loading h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-primary);
  }

  /* RESULT LAYOUT */
  #ai-status-results {
    display: none;
    flex-direction: row;
    height: 100%;
  }
  #ai-status-results.active {
    display: flex;
  }

  /* Report Panel (Scrollable markdown) */
  .ai-report-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 30px;
    border-right: 1px solid var(--border);
    line-height: 1.6;
    color: var(--text-primary);
    font-size: 13.5px;
  }

  /* Markdown custom styles for AI Report */
  .ai-report-scroll h1 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(168, 85, 247, 0.25);
    background: linear-gradient(135deg, #fff, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .ai-report-scroll h2 {
    font-size: 14.5px;
    font-weight: 700;
    margin-top: 24px;
    margin-bottom: 12px;
    color: #a855f7;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .ai-report-scroll p {
    margin-bottom: 14px;
    color: var(--text-primary);
    opacity: 0.95;
  }
  .ai-report-scroll ul, .ai-report-scroll ol {
    margin-bottom: 16px;
    padding-left: 20px;
  }
  .ai-report-scroll li {
    margin-bottom: 6px;
  }
  .ai-report-scroll strong {
    color: #6366f1;
    font-weight: 600;
  }
  .ai-report-scroll blockquote {
    background: rgba(168, 85, 247, 0.05);
    border-left: 3px solid #a855f7;
    padding: 10px 14px;
    border-radius: 6px;
    margin: 14px 0;
    font-style: italic;
    color: var(--text-secondary);
  }

  /* MINI CHAT STYLES */
  .ai-minichat-box {
    width: 360px;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.1);
    height: 100%;
    flex-shrink: 0;
  }
  .ai-minichat-header {
    padding: 14px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: .4px;
  }
  .ai-minichat-reset {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 2px;
    opacity: 0.6;
    transition: opacity .2s;
  }
  .ai-minichat-reset:hover {
    opacity: 1;
  }
  .ai-minichat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  /* Chat bubbles */
  .ai-chat-bubble {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 12.5px;
    line-height: 1.5;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  }
  .ai-chat-bubble.user {
    background: #6366f1;
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 2px;
  }
  .ai-chat-bubble.ai {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
    align-self: flex-start;
    border-bottom-left-radius: 2px;
  }
  .ai-chat-bubble.error {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
    align-self: center;
    max-width: 90%;
    font-size: 11.5px;
  }

  .ai-minichat-input-wrap {
    padding: 12px 14px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
  }
  .ai-minichat-input-wrap input {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color .2s;
  }
  .ai-minichat-input-wrap input:focus {
    border-color: #6366f1;
  }
  .ai-minichat-input-wrap button {
    background: #6366f1;
    border: none;
    cursor: pointer;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .1s;
  }
  .ai-minichat-input-wrap button:hover {
    background: #4f46e5;
  }
  .ai-minichat-input-wrap button:active {
    transform: scale(0.95);
  }
  .ai-minichat-input-wrap button svg {
    width: 16px;
    height: 16px;
    fill: #fff;
  }

  /* Animated typing dot bubble */
  .ai-typing-bubble {
    align-self: flex-start;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 12px;
    border-bottom-left-radius: 2px;
    padding: 10px 16px;
    display: flex;
    gap: 4px;
    align-items: center;
  }
  .ai-typing-dot {
    width: 6px;
    height: 6px;
    background: var(--text-secondary);
    border-radius: 50%;
    animation: typingDots 1.4s infinite ease-in-out;
  }
  .ai-typing-dot:nth-child(2) { animation-delay: 0.2s; }
  .ai-typing-dot:nth-child(3) { animation-delay: 0.4s; }

  @keyframes typingDots {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
  }

  /* RESPONSIVE DESIGN FOR AI MODAL */
  @media (max-width: 960px) {
    .ai-modal {
      width: 100%;
      height: 98vh;
    }
    .ai-modal-body {
      flex-direction: column;
    }
    .ai-setup-panel {
      width: 100%;
      height: 250px;
      border-right: none;
      border-bottom: 1px solid var(--border);
      padding: 16px;
      gap: 12px;
    }
    .ai-result-panel {
      flex: 1;
    }
  }

  @media (max-width: 768px) {
    #ai-status-results {
      flex-direction: column;
    }
    .ai-report-scroll {
      height: 50%;
      border-right: none;
      border-bottom: 1px solid var(--border);
    }
    .ai-minichat-box {
      width: 100%;
      height: 50%;
    }
  }

  /* AI HISTORY STYLES */
  .ai-history-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
    padding-right: 4px;
    margin-top: 6px;
  }
  .ai-history-empty {
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
    padding: 12px 0;
    font-style: italic;
  }
  .ai-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    transition: all .2s ease;
    gap: 8px;
  }
  .ai-history-item:hover {
    transform: translateY(-1px);
    border-color: #a855f7;
    background: rgba(168, 85, 247, 0.05);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  }
  .ai-history-item.active {
    border-color: #a855f7;
    background: rgba(168, 85, 247, 0.08);
  }
  .ai-history-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .ai-history-period {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ai-history-meta {
    font-size: 9px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .ai-history-model {
    color: #a855f7;
    font-weight: 600;
  }
  .ai-history-del {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    padding: 4px;
    border-radius: 4px;
    opacity: 0.5;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ai-history-del:hover {
    opacity: 1;
    background: rgba(239, 68, 68, 0.15);
    transform: scale(1.1);
  }

  /* REPORT ACTIONS BAR */
  .ai-report-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-right: 1px solid var(--border);
    overflow: hidden;
  }
  
  .ai-report-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.01);
    border-bottom: 1px solid var(--border);
    padding: 10px 24px;
    flex-shrink: 0;
  }
  
  .ai-actions-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .5px;
  }
  
  .ai-copy-buttons {
    display: flex;
    gap: 8px;
  }
  
  .ai-copy-btn {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  
  .ai-copy-btn:hover {
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  }
  
  /* Color highlights for different copy types */
  .ai-copy-btn[onclick*="'markdown'"]:hover {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.05);
  }
  .ai-copy-btn[onclick*="'text'"]:hover {
    border-color: #a855f7;
    background: rgba(168, 85, 247, 0.05);
  }
  .ai-copy-btn[onclick*="'whatsapp'"]:hover {
    border-color: #00a884;
    background: rgba(0, 168, 132, 0.05);
    color: #00a884;
  }

  /* BEAUTIFIED MARKDOWN RENDERING */
  .ai-report-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 24px 30px 40px;
    line-height: 1.65;
    color: var(--text-primary);
    font-size: 13.5px;
    border-right: none !important;
  }
  
  /* Glow/Gradient headings */
  .ai-report-scroll h1 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 22px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(168, 85, 247, 0.15);
    background: linear-gradient(135deg, #fff 30%, #a855f7 70%, #6366f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    line-height: 1.3;
  }
  
  .ai-report-scroll h2 {
    font-size: 14.5px;
    font-weight: 700;
    margin-top: 28px;
    margin-bottom: 12px;
    color: #a855f7;
    border-bottom: 1px dashed rgba(168, 85, 247, 0.1);
    padding-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: .2px;
  }
  
  .ai-report-scroll h3 {
    font-size: 13px;
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 8px;
    color: #6366f1;
  }
  
  .ai-report-scroll p {
    margin-bottom: 16px;
    color: var(--text-primary);
    opacity: 0.95;
    letter-spacing: .1px;
  }
  
  .ai-report-scroll ul, .ai-report-scroll ol {
    margin-bottom: 20px;
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  
  .ai-report-scroll li {
    margin-bottom: 0;
    position: relative;
    list-style-type: disc;
    color: var(--text-primary);
  }
  
  .ai-report-scroll li strong {
    color: #6366f1;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.05);
    padding: 1px 4px;
    border-radius: 4px;
  }
  
  .ai-report-scroll blockquote {
    background: rgba(168, 85, 247, 0.03);
    border-left: 4px solid #a855f7;
    padding: 12px 18px;
    border-radius: 0 10px 10px 0;
    margin: 18px 0;
    font-style: italic;
    color: var(--text-secondary);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.15);
  }

  /* Responsive fixes */
  @media (max-width: 768px) {
    .ai-report-actions {
      padding: 8px 16px;
    }
    .ai-actions-title {
      display: none; /* Hide to save space on mobile */
    }
  }