/* ===============================
       Ne.W.S. — Brand-driven theming
	   file news-chat.css 
       Palette inferred from site look & feel
       =============================== */
    :root{
      --news-primary: #0A66C2;        /* Royal Blue */
      --news-primary-700: #004E92;    /* Ocean Blue (darker for hover/headers) */
      --news-primary-800: #003C70;    /* Even darker for active states */
      --news-accent: #E0ECF8;         /* Powder Blue (light surfaces) */
      --news-bg: #FFFFFF;             /* base */
      --news-bg-subtle: #F4F7FA;      /* subtle background */
      --news-border: #D9E2EC;         /* light border */
      --news-text: #1F2937;           /* slate-800 */
      --news-text-muted: #5E6B7A;     /* slate-600/700 */
      --radius-lg: 16px;
      --radius-full: 999px;
      --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
      --shadow-md: 0 6px 18px rgba(17,24,39,.12);
      --shadow-lg: 0 12px 32px rgba(17,24,39,.18);
      --focus: 0 0 0 3px rgba(10,102,194,.28); /* accessible focus ring in brand blue */
    }

    *{ box-sizing: border-box; }
    html,body{ height: 100%; }
    body{
      margin: 0; 
      font-family: "Questrial";
      color: var(--news-text);
      background: var(--news-bg);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* === WIDGET BUTTON === */
    #n8n-chat-button{
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 64px;
      height: 64px;
      background: linear-gradient(135deg, var(--news-primary) 0%, var(--news-primary-700) 100%);
      border-radius: var(--radius-full);
      box-shadow: var(--shadow-md);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9998;
      transition: transform .2s ease, box-shadow .2s ease;
    }
    #n8n-chat-button:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); }
    #n8n-chat-button:focus-visible{ outline: none; box-shadow: var(--focus); }
    #n8n-chat-button svg{ width: 28px; height: 28px; fill: #fff; }

    /* === CHAT CONTAINER === */
    #n8n-chat-container{
      position: fixed;
      bottom: 92px;
      right: 20px;
      width: 380px;
      height: 600px;
      max-height: 80vh;
      background: var(--news-bg);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      z-index: 9999;
      display: none;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid var(--news-border);
    }
    #n8n-chat-container.active{ display: flex; animation: slideUp .25s ease; }
    @keyframes slideUp{ from{opacity:0; transform: translateY(16px);} to{opacity:1; transform: translateY(0);} }

    /* === CHAT HEADER === */
    .chat-header{
      background: linear-gradient(135deg, var(--news-primary-700) 0%, var(--news-primary-800) 100%);
      color: #fff;
      padding: 16px 18px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .chat-header-info{ display:flex; align-items:center; gap: 12px; }
    .chat-avatar{
      width: 40px; height: 40px;
      background: rgba(255,255,255,.18);
      border-radius: var(--radius-full);
      display:flex; align-items:center; justify-content:center;
      font-size: 20px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
    }
    .chat-title{
      font-size: 18px; font-weight: 700; letter-spacing:.2px; margin: 0;
    }
    .chat-subtitle{
      font-size: 12px; margin: 2px 0 0; opacity:.95;
    }
    .chat-close{
      width: 34px; height: 34px;
      background: transparent;
      border: none; border-radius: var(--radius-full);
      cursor: pointer; display:flex; align-items:center; justify-content:center;
      transition: background .18s ease;
    }
    .chat-close:hover{ background: rgba(255,255,255,.18); }
    .chat-close:focus-visible{ outline: none; box-shadow: var(--focus); }
    .chat-close svg{ fill: #fff; }

    /* === MESSAGES AREA === */
    .chat-messages{
      flex: 1;
      overflow-y: auto;
      padding: 18px;
      background: linear-gradient(to bottom, var(--news-bg-subtle) 0%, #fff 100%);
    }
    .message{ margin-bottom: 14px; display:flex; animation: fadeIn .2s ease; }
    @keyframes fadeIn{ from{opacity: 0; transform: translateY(8px);} to{opacity:1; transform: translateY(0);} }
    .message.user{ justify-content: flex-end; }
    .message-bubble{
      max-width: 74%;
      padding: 12px 14px;
      border-radius: 18px;
      word-wrap: break-word;
      font-size: 15px;
      line-height: 1.45;
      box-shadow: var(--shadow-sm);
    }
    .message.bot .message-bubble{
      background: var(--news-accent);
      color: var(--news-text);
      border-bottom-left-radius: 6px;
      border: 1px solid var(--news-border);
    }
    .message.user .message-bubble{
      background: linear-gradient(135deg, var(--news-primary-700) 0%, var(--news-primary-800) 100%);
      color: #fff;
      border-bottom-right-radius: 6px;
    }

    /* === TYPING INDICATOR === */
    .typing-indicator{
      display: none;
      padding: 10px 12px;
      background: #fff;
      border-radius: 14px;
      border-bottom-left-radius: 6px;
      margin-bottom: 12px;
      width: fit-content;
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--news-border);
    }
    .typing-indicator.active{ display: inline-block; }
    .typing-indicator span{
      display:inline-block; width:8px; height:8px; border-radius:50%;
      background: var(--news-primary);
      margin: 0 2px;
      animation: typing 1.3s infinite ease-in-out;
    }
    .typing-indicator span:nth-child(2){ animation-delay: .15s; }
    .typing-indicator span:nth-child(3){ animation-delay: .3s; }
    @keyframes typing{ 0%,80%,100%{ transform: scale(1); opacity:.55;} 40%{ transform: scale(1.25); opacity:1; } }

    /* === INPUT AREA === */
    .chat-input-container{
      padding: 16px;
      background: #fff;
      border-top: 1px solid var(--news-border);
    }
    .chat-form{ display:flex; gap: 10px; }
    .chat-input{
      flex: 1;
      padding: 12px 14px;
      border: 1.5px solid var(--news-border);
      border-radius: var(--radius-full);
      outline: none;
      font-size: 15px;
      background: #fff;
      color: var(--news-text);
      transition: border-color .18s ease, box-shadow .18s ease;
    }
    .chat-input::placeholder{ color: var(--news-text-muted); font-weight: 600; opacity: .95;}
    .chat-input:focus{
      border-color: var(--news-primary);
      box-shadow: var(--focus);
    }
    .chat-send{
      width: 44px; height: 44px;
      background: linear-gradient(135deg, var(--news-primary) 0%, var(--news-primary-700) 100%);
      border: none; border-radius: var(--radius-full);
      cursor: pointer; display:flex; align-items:center; justify-content:center;
      transition: transform .12s ease, filter .12s ease;
    }
    .chat-send:hover{ transform: translateY(-1px); filter: brightness(1.03); }
    .chat-send:disabled{ opacity:.55; cursor: not-allowed; }
    .chat-send:focus-visible{ outline: none; box-shadow: var(--focus); }
    .chat-send svg{ fill:#fff; }

    /* === BADGE / BRAND STRIP === */
    .brand-strip{
      display:flex; align-items:center; justify-content:center;
      gap: 8px;
      background: linear-gradient(135deg, var(--news-primary-700) 0%, var(--news-primary-800) 100%);
      color:#fff;
      font-size:12px;
      padding: 6px 10px;
    }
    .brand-pill{
      padding: 2px 8px;
      background: rgba(255,255,255,.18);
      border-radius: var(--radius-full);
      border: 1px solid rgba(255,255,255,.35);
      letter-spacing:.2px;
    }

    /* === MOBILE === */
    @media (max-width: 480px){
      #n8n-chat-container{
        width: 100%; height: 100%; max-height: 100%;
        bottom: 0; right: 0; border-radius: 0;
      }
      .chat-header{ padding: 14px; }
      .chat-messages{ padding: 14px; }
    }

    /* Force-reduce motion for users who prefer it */
    @media (prefers-reduced-motion: reduce){
      *{ animation: none !important; transition: none !important; }
    }