/* Echo UI: shared CRM workflow compositions and runtime surfaces. */
.ui-card--success-outline,
    .card-success{ border-color: rgba(22,163,74,.45); }
    .card-success{ background: rgba(22,163,74,.08); }
    .ui-card:hover{ }

    input[type="checkbox"]{
      width: auto;
      min-height: auto;
      padding: 0;
      margin-right: 6px;
    }

    .ui-pill:hover{ color: var(--ui-color-text); }
    .ui-pill.active{
      color: var(--ui-color-text);
      border-color: rgba(210,9,0,.55);
      background: rgba(210,9,0,.15);
    }
    .badge-color{
      border-color: var(--badge-color, var(--ui-color-border-strong));
      color: var(--badge-color, var(--ui-color-text));
      background: var(--ui-color-surface-muted);
      font-weight: var(--ui-font-weight-bold);
    }
    .badge-dot-color{
      background: var(--badge-color, var(--ui-color-text-muted));
    }

    .hr{
      height:1px;
      background: var(--ui-color-border);
      margin: 10px 0;
    }

    .comment{
      padding:8px 0;
      border-bottom:1px solid var(--ui-color-border);
    }
    .comment-text{
      margin-top:6px;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .comment-system{
      color: var(--ui-color-text-muted);
      font-size: var(--ui-font-size-secondary);
      line-height: var(--ui-line-height-snug);
    }
    .comment.comment-system{
      padding:2px 0;
    }
    .comment-system .ui-badge{
      background: var(--ui-color-surface-raised);
      border-color: var(--ui-color-border-strong);
    }
    .comment-html{
      padding-top: 4px;
    }
    .email-frame{
      width: 100%;
      min-height: 140px;
      border: 0;
      display: block;
      background: var(--ui-color-surface);
      border: 1px solid rgba(18,24,38,.10);
      border-radius: 8px;
    }
    .comment-system .comment-text{
      margin-top:0;
      line-height: var(--ui-line-height-snug);
    }
    .comment-attachment{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
      font-size:var(--ui-font-size-secondary);
      color: var(--ui-color-text-muted);
    }
    .comment-attachment a{ color: var(--ui-color-text); }

    .ui-split{
      display:flex;
      justify-content:space-between;
      gap:10px;
      align-items:flex-start;
    }
    .ui-tab.active{
      color: var(--ui-color-primary-text);
      border-color: var(--ui-color-primary-active);
      background: var(--ui-color-primary-active);
    }
    .ui-tab:active{
      border-color: var(--ui-color-primary-active);
      background: var(--ui-color-primary-active);
      color: var(--ui-color-primary-text);
    }
    .auth-shell{
      min-height:calc(100dvh - 60px);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:clamp(24px, 6vh, 64px) 0;
      position:relative;
      isolation:isolate;
    }
    .auth-shell::before{
      content:"";
      position:absolute;
      z-index:-1;
      width:min(660px, 92vw);
      height:min(660px, 92vw);
      border-radius:999px;
      background:radial-gradient(circle, rgba(var(--ui-primary-rgb), .11) 0%, rgba(var(--ui-primary-rgb), .035) 42%, transparent 70%);
      filter:blur(2px);
    }
    .auth-card{
      max-width:470px;
      width:100%;
      margin:0;
      padding:clamp(26px, 4vw, 38px);
      position:relative;
      overflow:hidden;
      border-color:var(--ui-color-border-strong);
      border-radius:var(--ui-radius-lg);
      box-shadow:var(--ui-shadow-overlay), inset 0 1px 0 var(--ui-color-edge-highlight);
    }
    .auth-card-accent{
      position:absolute;
      inset:0 0 auto;
      height:4px;
      background:linear-gradient(90deg, var(--ui-color-primary) 0%, #0b2948 52%, var(--ui-color-primary) 100%);
    }
    .auth-brand{
      display:grid;
      grid-template-columns:82px minmax(0, 1fr);
      align-items:center;
      gap:var(--ui-space-8);
      padding-bottom:var(--ui-space-8);
      border-bottom:1px solid var(--ui-color-border);
    }
    .auth-brand-mark{
      width:82px;
      height:82px;
      display:grid;
      place-items:center;
      position:relative;
      isolation:isolate;
      border:1px solid var(--ui-color-border);
      border-radius:22px;
      background:#fff;
      box-shadow:var(--ui-shadow-raised);
    }
    .auth-brand-mark::before,
    .auth-brand-mark::after{
      content:"";
      position:absolute;
      z-index:-1;
      inset:1px;
      border:2px solid rgba(var(--ui-primary-rgb), .42);
      border-radius:22px;
      opacity:0;
      transform:scale(.96);
      animation:authBrandPulse 2.8s cubic-bezier(.22, .72, .18, 1) infinite;
      pointer-events:none;
    }
    .auth-brand-mark::after{ animation-delay:1.4s; }
    .auth-brand-mark img{
      width:68px;
      height:68px;
      display:block;
      position:relative;
      z-index:1;
      object-fit:contain;
    }
    .auth-brand-copy{ min-width:0; }
    .auth-kicker{
      margin-bottom:var(--ui-space-2);
      color:var(--ui-color-primary);
      font-size:var(--ui-font-size-caption);
      font-weight:var(--ui-font-weight-bold);
      letter-spacing:.12em;
      line-height:var(--ui-line-height-tight);
      text-transform:uppercase;
    }
    .auth-subtitle{
      margin:var(--ui-space-3) 0 0;
      color:var(--ui-color-text-muted);
      font-size:var(--ui-font-size-secondary);
      line-height:var(--ui-line-height-normal);
    }
    .auth-form{
      display:grid;
      gap:var(--ui-space-7);
      margin-top:var(--ui-space-8);
    }
    .auth-form .ui-label{ margin:0 0 var(--ui-space-2); }
    .auth-form .ui-control{ min-height:46px; }
    .auth-submit{ min-height:46px; margin-top:var(--ui-space-2); }
    @media (max-width:520px){
      .auth-shell{ align-items:flex-start; padding-top:24px; }
      .auth-brand{ grid-template-columns:68px minmax(0, 1fr); gap:var(--ui-space-6); }
      .auth-brand-mark{ width:68px; height:68px; border-radius:18px; }
      .auth-brand-mark img{ width:56px; height:56px; }
      .auth-card .ui-title--page{ font-size:var(--ui-font-size-page); }
    }
    @media (prefers-reduced-motion:reduce){
      .auth-brand-mark::before,
      .auth-brand-mark::after{ animation:none; }
    }
    .ui-alert.ui-alert--danger{ margin-top:12px; border-color: rgba(var(--ui-primary-rgb),.5); background: rgba(var(--ui-primary-rgb),.12); }
    .card-reply-client{
      border-color: rgba(210,9,0,.45);
      background: rgba(210,9,0,.08);
    }
    .card-reply-agent{
      border-color: rgba(31,111,235,.45);
      background: rgba(31,111,235,.08);
    }
    .card-reply-internal{
      border-color: rgba(32,177,90,.45);
      background: rgba(32,177,90,.08);
    }
    .ticket-whatsapp:not(.ticket-closed).card-reply-client{
      border-left: 4px solid rgba(210,9,0,.85);
      background: linear-gradient(90deg, rgba(210,9,0,.14) 0%, rgba(210,9,0,.08) 48%, rgba(210,9,0,.06) 100%);
    }
    .ticket-whatsapp:not(.ticket-closed).card-reply-agent{
      border-left: 4px solid rgba(31,111,235,.85);
      background: linear-gradient(90deg, rgba(31,111,235,.14) 0%, rgba(31,111,235,.08) 48%, rgba(31,111,235,.06) 100%);
    }
    .ticket-whatsapp:not(.ticket-closed).card-reply-internal{
      border-left: 4px solid rgba(32,177,90,.85);
      background: linear-gradient(90deg, rgba(32,177,90,.14) 0%, rgba(32,177,90,.08) 48%, rgba(32,177,90,.06) 100%);
    }
    .ticket-viewers{
      display: flex;
      justify-content: flex-end;
      gap: 6px;
      margin: 4px 0 8px;
    }
    .ticket-viewers-inline{
      margin: 0 0 8px;
    }
    .viewer-bubble{
      width: 28px;
      height: 28px;
      border-radius: 999px;
      border: 1px solid var(--ui-color-border-strong);
      background: var(--ui-color-surface-raised);
      color: var(--ui-color-text);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: var(--ui-font-size-caption);
      font-weight: var(--ui-font-weight-bold);
      text-transform: uppercase;
    }
    .viewer-bubble.typing{
      border-color: rgba(32,177,90,.7);
      box-shadow: 0 0 0 2px rgba(32,177,90,.18);
    }
    .ticket-closed{
      border-color: var(--ui-color-closed-border);
      background: var(--ui-color-closed-bg);
      color: var(--ui-color-closed-text);
    }
    .ticket-closed .u-text-strong,
    .ticket-closed .link-raise,
    .ticket-closed .ui-help{
      color: var(--ui-color-closed-text);
    }
    .ui-card--clickable.ticket-closed:hover{
      border-color: var(--ui-color-closed-border);
      background: var(--ui-color-closed-bg);
    }
    .ticket-actions{ min-width:260px; }
    .ui-action-group--wrap{ flex-wrap:wrap; }
    .ui-form--inline.status-form{ flex-wrap: nowrap; }
    .status-form select{ width: auto; min-width: 140px; font-size: var(--ui-font-size-control); }
    .status-form select.status-color-select{
      border-color: var(--status-color, var(--ui-color-border-strong));
      color: var(--status-color, var(--ui-color-text));
      background:
        linear-gradient(0deg, color-mix(in srgb, var(--status-color, var(--ui-color-surface)) 12%, transparent), color-mix(in srgb, var(--status-color, var(--ui-color-surface)) 12%, transparent)),
        var(--ui-color-surface);
      font-weight: var(--ui-font-weight-bold);
    }
    .status-form select.status-color-select option{
      color: var(--option-status-color, var(--ui-color-text));
      background: var(--ui-color-surface);
      font-weight: var(--ui-font-weight-bold);
    }
    .status-color-select--active{ --status-color: green; }
    .status-color-select--suspended{ --status-color: red; }
    .status-color-select--canceled{ --status-color: #6b7280; }
    .status-color-select--bad-debt{ --status-color: #7f1d1d; }
    .status-color-select--los-failed{ --status-color: darkorange; }
    .status-color-select--awaiting-documentation{ --status-color: goldenrod; }
    .status-color-select--build-in-progress{ --status-color: royalblue; }
    .status-color-select--application-failed{ --status-color: #7c3aed; }
    .status-color-select--lead{ --status-color: purple; }
    .status-color-select--unknown{ --status-color: var(--ui-color-text-muted); }
    .status-color-option--active{ --option-status-color: green; }
    .status-color-option--suspended{ --option-status-color: red; }
    .status-color-option--canceled{ --option-status-color: #6b7280; }
    .status-color-option--bad-debt{ --option-status-color: #7f1d1d; }
    .status-color-option--los-failed{ --option-status-color: darkorange; }
    .status-color-option--awaiting-documentation{ --option-status-color: goldenrod; }
    .status-color-option--build-in-progress{ --option-status-color: royalblue; }
    .status-color-option--application-failed{ --option-status-color: #7c3aed; }
    .status-color-option--lead{ --option-status-color: purple; }
    .status-msg{ white-space: nowrap; display: inline-block; }
    .divider-row{ border-bottom:1px solid rgba(18,24,38,.08); padding:10px 0; }
    .text-accent{ color: var(--ui-color-info); }
    .link-raise{ position:relative; z-index:2; }
    .hidden{ display:none; }
    .input-page-number{ width:88px; }
    .catalog-item-kind-label{ min-width:160px; align-self:center; }
    .embedded-card{ padding:0; }
    .embedded-card-summary{
      list-style:none;
      cursor:pointer;
      padding:12px 16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .embedded-card-summary::-webkit-details-marker{ display:none; }
    .permission-summary-actions{ display:flex; gap:8px; align-items:center; }
    .summary-pill{ cursor:pointer; width:max-content; }
    .sticky-panel{
      position: sticky;
      top: 96px;
    }
    .mb-1{ margin-bottom:4px; }
    .ml-2{ margin-left:6px; }
    .mr-2{ margin-right:6px; }
    .min-260{ min-width:260px; }
    .min-280{ min-width:280px; }
    .max-320{ max-width:320px; }
    .max-420{ max-width:420px; width:100%; }
    .reminder-toasts{
      position: fixed;
      top: 18px;
      right: 18px;
      z-index: 9999;
      display:flex;
      flex-direction:column;
      gap:12px;
      max-width: 360px;
    }
    .call-alerts{
      position: fixed;
      top: 18px;
      right: 18px;
      z-index: 10000;
      display:flex;
      flex-direction:column;
      gap:12px;
      max-width: 360px;
      pointer-events: none;
    }
    .notification-toasts{
      position: fixed;
      top: 18px;
      right: 18px;
      z-index: 10001;
      display:flex;
      flex-direction:column;
      gap:12px;
      max-width: 360px;
      pointer-events: none;
    }
    .reminder-toast{
      background: var(--ui-color-surface);
      border: 1px solid var(--ui-color-border-strong);
      border-radius: var(--ui-radius-sm);
      box-shadow: var(--ui-shadow-surface);
      padding: 12px 14px;
    }
    .notification-toast{
      pointer-events: auto;
      border-color: rgba(210, 9, 0, .28);
      background: color-mix(in srgb, var(--ui-color-surface) 88%, rgba(210, 9, 0, .10));
    }
    .call-alert-toast{
      pointer-events: auto;
      border-color: rgba(14, 165, 233, .45);
      background: color-mix(in srgb, var(--ui-color-surface) 86%, rgba(14, 165, 233, .18));
    }
    .call-alert-link{
      color: var(--ui-color-primary);
      text-decoration: none;
      font-weight: var(--ui-font-weight-semibold);
    }
    .call-alert-link:hover{
      text-decoration: underline;
    }
    .reminder-toast.is-pulsing{
      animation: reminderPulse 10s ease-in-out infinite;
    }
    .reminder-toast-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .reminder-toast-actions{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:8px;
      flex-wrap:wrap;
    }
    .reminder-toast-title{
      font-family: var(--ui-font-heading);
      font-size: var(--ui-font-size-subsection);
      font-weight: var(--ui-font-weight-semibold);
      letter-spacing: var(--ui-letter-spacing-heading);
    }
    .reminder-toast-body{
      margin-top: 6px;
      font-size: var(--ui-font-size-body);
    }

    @keyframes fadeInUp{
      from{ opacity:0; transform: translateY(6px); }
      to{ opacity:1; transform: translateY(0); }
    }

    @keyframes authBrandPulse{
      0%{ opacity:0; transform:scale(.96); }
      18%{ opacity:.58; }
      72%, 100%{ opacity:0; transform:scale(1.34); }
    }


    @keyframes reminderPulse{
      0%{ box-shadow: 0 0 0 0 rgba(var(--ui-primary-rgb), .38); transform: scale(1); }
      6%{ box-shadow: 0 0 0 10px rgba(var(--ui-primary-rgb), 0); transform: scale(1.02); }
      12%{ box-shadow: 0 0 0 0 rgba(var(--ui-primary-rgb), 0); transform: scale(1); }
      100%{ box-shadow: 0 0 0 0 rgba(var(--ui-primary-rgb), 0); transform: scale(1); }
    }

    @media (prefers-reduced-motion: reduce){
      .reminder-toast.is-pulsing{ animation: none; }
    }

    @media (max-width: 700px){
      header{ padding: 12px 0 10px; }
      main{ padding: 18px 12px 50px; }
      .container{ padding: 0 12px; }
      .topbar{ flex-wrap: wrap; gap: 10px; }
      .brand{ min-width: auto; }
      .ui-split{ flex-wrap: wrap; }
      .ui-form--inline.status-form{ flex-wrap: wrap; }
      .nav a{ padding: 7px 10px; white-space: nowrap; }
      th:nth-child(5), td:nth-child(5){ display:none; }
      .ticket-actions{ min-width: 100%; }
      .sticky-panel{ position: static; }
      .reminder-toasts{
        left: 12px;
        right: 12px;
        top: 12px;
        max-width: none;
      }
      .call-alerts{
        left: 12px;
        right: 12px;
        top: 12px;
        max-width: none;
      }
      .notification-toasts{
        left: 12px;
        right: 12px;
        top: 12px;
        max-width: none;
      }
      .notification-popover{
        position: fixed;
        top: 72px;
        right: 12px;
        left: 12px;
        width: auto;
      }
    }