/* =========================================================
   SeeYouIOS — Global Search + Customer 360
   ========================================================= */

.sy-search-trigger{
 min-height:35px;

 display:inline-flex!important;
 align-items:center;
 gap:7px;

 box-sizing:border-box;

 padding:0 10px!important;

 border:
  1px solid rgba(148,163,184,.10)!important;

 border-radius:10px!important;

 background:
  rgba(255,255,255,.02)!important;

 color:#8392a8!important;

 text-decoration:none!important;

 font-size:8px!important;

 font-weight:850!important;
}


.sy-search-trigger:hover{
 color:#e2e8f0!important;

 border-color:
  rgba(34,211,238,.18)!important;

 background:
  rgba(34,211,238,.035)!important;
}


.sy-search-trigger svg{
 width:14px;
 height:14px;

 fill:none;

 stroke:currentColor;

 stroke-width:1.8;
}


.sy-search-trigger kbd{
 padding:2px 5px;

 border:
  1px solid rgba(148,163,184,.10);

 border-radius:5px;

 color:#64748b;

 font-size:6px;

 font-family:inherit;
}


/* PAGE */

.sy360-page{
 width:min(1320px,100%);

 box-sizing:border-box;

 margin:0 auto;

 padding:
  26px 28px 60px;
}


.sy360-hero{
 margin-bottom:16px;

 padding:22px;

 border:
  1px solid rgba(148,163,184,.10);

 border-radius:18px;

 background:
  linear-gradient(
   130deg,
   rgba(34,211,238,.045),
   rgba(91,140,255,.035),
   rgba(139,92,246,.035)
  );
}


.sy360-kicker{
 color:#617289;

 font-size:7px;

 font-weight:900;

 letter-spacing:.15em;

 text-transform:uppercase;
}


.sy360-hero h1{
 margin:6px 0 5px;

 color:#f5f7fb;

 font-size:24px;

 letter-spacing:-.04em;
}


.sy360-hero p{
 margin:0;

 color:#718198;

 font-size:9px;
}


/* SEARCH BAR */

.sy360-search{
 display:grid;

 grid-template-columns:
  minmax(0,1fr) auto;

 gap:8px;

 margin-top:18px;
}


.sy360-search input{
 height:48px!important;

 padding:0 15px!important;

 border-radius:12px!important;

 font-size:11px!important;
}


.sy360-search button{
 min-width:105px;

 border-radius:12px!important;

 background:
  linear-gradient(
   120deg,
   #087f9d,
   #426bd5
  )!important;

 color:#fff!important;

 font-size:9px!important;

 font-weight:900!important;
}


/* RESULT GRID */

.sy360-results{
 display:grid;

 gap:8px;
}


.sy360-result{
 display:grid;

 grid-template-columns:
  44px minmax(0,1fr) auto;

 align-items:center;

 gap:12px;

 padding:12px;

 border:
  1px solid rgba(148,163,184,.09);

 border-radius:14px;

 background:
  linear-gradient(
   150deg,
   rgba(13,20,35,.86),
   rgba(7,12,23,.93)
  );
}


.sy360-avatar{
 width:44px;
 height:44px;

 display:grid;
 place-items:center;

 border:
  1px solid rgba(34,211,238,.12);

 border-radius:13px;

 background:
  linear-gradient(
   145deg,
   rgba(34,211,238,.08),
   rgba(139,92,246,.08)
  );

 color:#dbeafe;

 font-size:10px;

 font-weight:900;
}


.sy360-result-copy{
 min-width:0;
}


.sy360-result-copy strong{
 display:block;

 overflow:hidden;

 color:#dce5f2;

 font-size:11px;

 white-space:nowrap;

 text-overflow:ellipsis;
}


.sy360-result-copy p{
 margin:4px 0 0;

 overflow:hidden;

 color:#65758b;

 font-size:8px;

 white-space:nowrap;

 text-overflow:ellipsis;
}


.sy360-pills{
 display:flex;

 flex-wrap:wrap;

 gap:5px;

 margin-top:7px;
}


.sy360-pill{
 padding:3px 6px;

 border:
  1px solid rgba(148,163,184,.08);

 border-radius:999px;

 background:
  rgba(255,255,255,.02);

 color:#708198;

 font-size:6px;

 font-weight:850;
}


.sy360-pill.unread{
 border-color:
  rgba(34,211,238,.14);

 background:
  rgba(34,211,238,.06);

 color:#a5f3fc;
}


.sy360-actions{
 display:flex;

 gap:6px;
}


.sy360-action{
 display:inline-flex!important;

 align-items:center;

 min-height:33px;

 padding:0 10px!important;

 border:
  1px solid rgba(148,163,184,.10)!important;

 border-radius:9px!important;

 background:
  rgba(255,255,255,.02)!important;

 color:#8fa1b8!important;

 text-decoration:none!important;

 font-size:7px!important;

 font-weight:850!important;
}


/* CUSTOMER HERO */

.sy360-customer-head{
 display:grid;

 grid-template-columns:
  auto minmax(0,1fr) auto;

 align-items:center;

 gap:14px;
}


.sy360-customer-head
.sy360-avatar{
 width:58px;
 height:58px;

 border-radius:16px;

 font-size:13px;
}


.sy360-customer-name{
 color:#f1f5f9;

 font-size:20px;

 font-weight:900;

 letter-spacing:-.035em;
}


.sy360-customer-sub{
 margin-top:5px;

 color:#69798f;

 font-size:8px;
}


.sy360-grid{
 display:grid;

 grid-template-columns:
  repeat(4,minmax(0,1fr));

 gap:9px;

 margin:16px 0;
}


.sy360-stat{
 padding:14px;

 border:
  1px solid rgba(148,163,184,.09);

 border-radius:13px;

 background:
  rgba(8,13,24,.78);
}


.sy360-stat span{
 display:block;

 color:#64748b;

 font-size:7px;

 font-weight:850;

 text-transform:uppercase;
}


.sy360-stat strong{
 display:block;

 margin-top:7px;

 overflow:hidden;

 color:#e2e8f0;

 font-size:14px;

 text-overflow:ellipsis;

 white-space:nowrap;
}


/* INFORMATION */

.sy360-layout{
 display:grid;

 grid-template-columns:
  330px minmax(0,1fr);

 gap:12px;
}


.sy360-card{
 margin-bottom:10px;

 overflow:hidden;

 border:
  1px solid rgba(148,163,184,.09);

 border-radius:14px;

 background:
  rgba(8,13,24,.80);
}


.sy360-card-head{
 padding:11px 13px;

 border-bottom:
  1px solid rgba(148,163,184,.07);

 color:#8796aa;

 font-size:8px;

 font-weight:900;

 letter-spacing:.065em;

 text-transform:uppercase;
}


.sy360-card-body{
 padding:12px;
}


.sy360-info{
 display:grid;

 grid-template-columns:
  95px minmax(0,1fr);

 gap:7px;

 padding:7px 0;

 border-bottom:
  1px solid rgba(148,163,184,.055);
}


.sy360-info:last-child{
 border:0;
}


.sy360-info span{
 color:#53637a;

 font-size:7px;
}


.sy360-info strong{
 overflow-wrap:anywhere;

 color:#aebaca;

 font-size:8px;

 font-weight:750;
}


/* TIMELINE */

.sy360-timeline{
 padding:9px 13px 16px;
}


.sy360-event{
 position:relative;

 display:grid;

 grid-template-columns:
  36px minmax(0,1fr);

 gap:10px;

 padding:11px 0;
}


.sy360-event:not(:last-child)::after{
 content:"";

 position:absolute;

 left:17px;
 top:47px;
 bottom:-2px;

 width:1px;

 background:
  rgba(148,163,184,.08);
}


.sy360-event-icon{
 width:36px;
 height:36px;

 z-index:1;

 display:grid;
 place-items:center;

 border:
  1px solid rgba(148,163,184,.10);

 border-radius:10px;

 background:#0b1220;

 color:#8294ab;

 font-size:7px;

 font-weight:900;
}


.sy360-event.message-in
.sy360-event-icon{
 color:#67e8f9;
}


.sy360-event.message-out
.sy360-event-icon{
 color:#c4b5fd;
}


.sy360-event.order
.sy360-event-icon{
 color:#6ee7b7;
}


.sy360-event.note
.sy360-event-icon{
 color:#fbbf24;
}


.sy360-event-copy strong{
 display:block;

 color:#cbd5e1;

 font-size:9px;

 font-weight:850;
}


.sy360-event-copy p{
 margin:4px 0;

 color:#75859b;

 font-size:8px;

 line-height:1.5;
}


.sy360-event-meta{
 color:#46566c;

 font-size:6px;
}


.sy360-empty{
 padding:30px 15px;

 text-align:center;

 color:#526278;

 font-size:9px;
}


@media(max-width:900px){

 .sy360-layout{
  grid-template-columns:1fr;
 }


 .sy360-grid{
  grid-template-columns:
   1fr 1fr;
 }


 .sy-search-trigger span,
 .sy-search-trigger kbd{
  display:none;
 }


 .sy-search-trigger{
  width:35px;

  justify-content:center;

  padding:0!important;
 }
}


@media(max-width:600px){

 .sy360-page{
  padding:
   17px 12px 40px;
 }


 .sy360-result{
  grid-template-columns:
   40px minmax(0,1fr);
 }


 .sy360-result
 .sy360-avatar{
  width:40px;
  height:40px;
 }


 .sy360-actions{
  grid-column:
   1 / -1;

  justify-content:flex-end;
 }


 .sy360-search{
  grid-template-columns:1fr;
 }


 .sy360-search button{
  min-height:42px;
 }


 .sy360-customer-head{
  grid-template-columns:
   auto minmax(0,1fr);
 }


 .sy360-customer-head
 .sy360-actions{
  grid-column:
   1 / -1;
 }


 .sy360-grid{
  grid-template-columns:
   1fr 1fr;
 }
}