/* Google Drive — connecting / backing-up / sent feedback.
   The dock icon shows an "uploading" state, and a floating chip narrates the
   action, ending on a green check or an amber warning. */

/* uploading: rising sheen over the icon + faster pip */
.serviceDockItem.uploading{
  border-color:var(--accent);
  animation:driveUploadPulse 1.4s ease-in-out infinite;
}
.serviceDockItem.uploading .serviceDockLive{animation-duration:.9s}
.serviceDockItem.uploading::after{
  content:"";
  position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;
  background:linear-gradient(0deg,transparent 0%,color-mix(in srgb,var(--accent2,var(--accent)) 55%,transparent) 50%,transparent 100%);
  background-size:100% 220%;
  animation:driveUploadRise 1.1s linear infinite;
  opacity:.7;
}
@keyframes driveUploadRise{from{background-position:0 100%}to{background-position:0 -120%}}
@keyframes driveUploadPulse{
  0%,100%{box-shadow:0 8px 22px rgba(0,0,0,.35),0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent)}
  50%{box-shadow:0 8px 22px rgba(0,0,0,.35),0 0 0 8px color-mix(in srgb,var(--accent) 0%,transparent)}
}

/* success flourish on the icon */
.serviceDockItem.celebrate{
  border-color:var(--good,#4ade80);
  animation:driveCelebrate .9s cubic-bezier(.2,.85,.2,1);
}
.serviceDockItem.celebrate::after{
  content:"";
  position:absolute;inset:-4px;border-radius:inherit;pointer-events:none;
  border:2px solid var(--good,#4ade80);
  animation:driveRing .9s ease-out forwards;
}
@keyframes driveCelebrate{0%{transform:scale(1)}35%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes driveRing{0%{opacity:.9;transform:scale(.85)}100%{opacity:0;transform:scale(1.6)}}

/* floating status chip beside the dock */
.driveWorkChip{
  position:fixed;
  left:16px;bottom:72px;
  transform:translateY(8px) scale(.96);
  z-index:11400;
  display:flex;align-items:center;gap:9px;
  max-width:min(300px,calc(100vw - 32px));
  padding:10px 14px;
  border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));
  border-radius:12px;
  background:color-mix(in srgb,var(--panel) 96%,black 4%);
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  color:var(--text);font-size:.8rem;font-weight:600;
  opacity:0;pointer-events:none;
  transition:opacity .28s ease,transform .28s cubic-bezier(.2,.85,.2,1);
}
.driveWorkChip.in{opacity:1;transform:none}
.driveWorkChip.done{border-color:color-mix(in srgb,var(--good,#4ade80) 55%,var(--line))}
.driveWorkChip.failed{border-color:color-mix(in srgb,var(--warn,#f59e0b) 55%,var(--line))}

.driveWorkSpinner{
  width:16px;height:16px;flex:0 0 auto;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  border-top-color:var(--accent2,var(--accent));
  animation:driveSpin .8s linear infinite;
}
@keyframes driveSpin{to{transform:rotate(360deg)}}
.driveWorkCheck{
  width:18px;height:18px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  background:var(--good,#4ade80);
  animation:drivePop .4s cubic-bezier(.2,.85,.2,1);
}
.driveWorkCheck::after{
  content:"";width:5px;height:9px;
  border:solid #06240f;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-1px);
}
.driveWorkX{
  width:18px;height:18px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  background:var(--warn,#f59e0b);color:#1a1205;font-weight:900;font-size:.8rem;
  animation:drivePop .4s cubic-bezier(.2,.85,.2,1);
}
@keyframes drivePop{from{transform:scale(0)}to{transform:scale(1)}}

@media(max-width:620px){
  .driveWorkChip{left:12px;bottom:66px}
}
@media(prefers-reduced-motion:reduce){
  .serviceDockItem.uploading,.serviceDockItem.uploading::after,.serviceDockItem.celebrate,
  .serviceDockItem.celebrate::after,.driveWorkSpinner,.driveWorkChip{animation:none!important;transition:none!important}
  .serviceDockItem.uploading::after{display:none}
  .driveWorkChip{opacity:1;transform:none}
}

/* ---- "what to back up" picker ---- */
.driveBackupBackdrop{
  position:fixed;inset:0;z-index:12000;
  display:grid;place-items:center;padding:18px;
  background:color-mix(in srgb,var(--bg) 55%,rgba(3,6,11,.78));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.driveBackupDialog{
  display:flex;flex-direction:column;
  width:min(520px,100%);max-height:88dvh;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line));
  border-radius:18px;background:color-mix(in srgb,var(--panel) 97%,black 3%);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.driveBackupHead{
  display:flex;align-items:center;gap:12px;padding:15px 16px;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--panel)),var(--panel));
}
.driveBackupLogo{
  display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;
  border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line));
  border-radius:11px;background:color-mix(in srgb,var(--accent) 8%,transparent);
}
.driveBackupLogo img{width:23px;height:23px;display:block}
.driveBackupHead>div{flex:1 1 auto;min-width:0}
.driveBackupHead span{color:var(--accent2,var(--accent));font-size:.58rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.driveBackupHead h2{margin:1px 0 0;font-size:1.02rem}
.driveBackupClose{
  flex:0 0 auto;width:30px;height:30px;padding:0;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  border-radius:9px;background:var(--surface-raised,var(--panel2));
  color:var(--muted);font-size:1.15rem;line-height:1;
}
.driveBackupClose:hover{color:var(--text);border-color:var(--accent)}
.driveBackupBody{padding:16px;overflow-y:auto;display:grid;gap:12px}
.driveBackupBody>p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.5}
.driveBackupBody>p b{color:var(--text)}
.driveBackupPicks{display:grid;gap:8px}
.driveBackupPick{
  position:relative;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:11px;
  padding:11px 13px;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--line) 85%,transparent);border-radius:12px;
  background:color-mix(in srgb,var(--surface-input,var(--panel)) 85%,transparent);
  transition:border-color .18s ease,background .18s ease;
}
.driveBackupPick:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.driveBackupPick input{position:absolute;opacity:0;pointer-events:none}
.driveBackupBox{
  width:19px;height:19px;border-radius:6px;position:relative;
  border:2px solid color-mix(in srgb,var(--accent) 45%,var(--line));
  background:var(--surface-input,var(--panel));transition:background .18s ease,border-color .18s ease;
}
.driveBackupPick input:checked~.driveBackupBox{background:var(--accent);border-color:var(--accent)}
.driveBackupPick input:checked~.driveBackupBox::after{
  content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid var(--accent-ink,#fff);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.driveBackupPick input:focus-visible~.driveBackupBox{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.driveBackupCopy{display:grid;gap:2px;min-width:0}
.driveBackupCopy strong{font-size:.84rem}
.driveBackupCopy small{color:var(--muted);font-size:.72rem;line-height:1.35}
.driveBackupName{display:grid;gap:5px}
.driveBackupName>span{color:var(--muted);font-size:.65rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.driveBackupName input{
  width:100%;padding:9px 11px;
  border:1px solid color-mix(in srgb,var(--line) 85%,transparent);border-radius:9px;
  background:var(--surface-input,var(--panel));color:var(--text);font-size:.85rem;font-family:inherit;
}
.driveBackupName input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.driveBackupError{
  margin:0;padding:9px 11px;border-radius:9px;
  border:1px solid color-mix(in srgb,var(--bad,#ef4444) 45%,var(--line));
  background:color-mix(in srgb,var(--bad,#ef4444) 10%,transparent);color:var(--text);font-size:.78rem;
}
.driveBackupError[hidden]{display:none}
.driveBackupFoot{
  display:flex;align-items:center;justify-content:flex-end;gap:9px;padding:13px 16px;
  border-top:1px solid color-mix(in srgb,var(--accent) 15%,var(--line));
  background:var(--surface-raised,var(--panel2));
}
.driveGhostBtn{
  min-height:36px;padding:0 14px;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:9px;
  background:color-mix(in srgb,var(--surface-input,var(--panel)) 88%,transparent);
  color:var(--text);font-size:.78rem;font-weight:700;
}
.driveGhostBtn:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
@media(max-width:560px){
  .driveBackupFoot{flex-direction:column-reverse}
  .driveBackupFoot .btn,.driveGhostBtn{width:100%}
}

/* ---- folder name + color picker with live preview ---- */
.driveFolderSection{
  display:grid;gap:9px;
  padding:12px;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));
  background:color-mix(in srgb,var(--surface-input,var(--panel)) 70%,transparent);
}
.driveFolderHeading{color:var(--muted);font-size:.65rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.driveFolderRow{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}

/* the live folder illustration */
.driveFolderPreview{
  position:relative;display:grid;place-items:center;flex:0 0 auto;
  width:104px;height:84px;
}
.driveFolderSvg{width:104px;height:auto;display:block;overflow:visible;
  filter:drop-shadow(0 8px 16px color-mix(in srgb,var(--folder,#4986e7) 40%,transparent));
  transition:filter .3s ease;
}
.driveFolderBack{fill:color-mix(in srgb,var(--folder,#4986e7) 78%,#000);transition:fill .3s ease}
.driveFolderTab{fill:color-mix(in srgb,var(--folder,#4986e7) 88%,#000);transition:fill .3s ease}
.driveFolderFront{fill:var(--folder,#4986e7);transition:fill .3s ease}
.driveFolderSheen{fill:rgba(255,255,255,.16)}
.driveFolderPreviewName{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  max-width:84px;padding:2px 7px;border-radius:5px;
  background:rgba(0,0,0,.28);color:#fff;
  font-size:.56rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.driveFolderControls{display:grid;gap:9px;min-width:0}
.driveFolderSwatches{display:flex;flex-wrap:wrap;gap:7px}
.driveFolderSwatch{
  width:24px;height:24px;padding:0;cursor:pointer;border-radius:7px;
  background:var(--sw);border:2px solid transparent;
  box-shadow:0 1px 3px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .16s ease,border-color .16s ease;
}
.driveFolderSwatch:hover{transform:translateY(-2px) scale(1.06)}
.driveFolderSwatch.on{
  border-color:var(--text);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--sw) 60%,transparent),0 2px 6px rgba(0,0,0,.4);
  transform:translateY(-1px);
}
.driveFolderSwatch.on::after{
  content:"";position:absolute;
}
@media(max-width:560px){
  .driveFolderRow{grid-template-columns:1fr;justify-items:center}
  .driveFolderControls{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .driveFolderSvg,.driveFolderBack,.driveFolderTab,.driveFolderFront,.driveFolderSwatch{transition:none!important}
}

/* ---- "export this report" attention pulse ---- */
.driveAttention{
  position:relative;
  animation:driveAttentionPulse 1.4s ease-in-out infinite;
  z-index:2;
}
@keyframes driveAttentionPulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}
  50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 0%,transparent)}
}
/* expanding rings that circle the button to draw the eye */
.driveAttention::before,.driveAttention::after{
  content:"";position:absolute;inset:-6px;border-radius:inherit;pointer-events:none;
  border:2px solid var(--accent2,var(--accent));
  animation:driveAttentionRing 1.8s ease-out infinite;
}
.driveAttention::after{animation-delay:.9s}
@keyframes driveAttentionRing{
  0%{opacity:.75;transform:scale(.94)}
  100%{opacity:0;transform:scale(1.28)}
}
@media(prefers-reduced-motion:reduce){
  .driveAttention{animation:none!important;outline:3px solid var(--accent);outline-offset:3px}
  .driveAttention::before,.driveAttention::after{animation:none!important;display:none}
}

/* ---- overwrite toggle + schedule ---- */
.driveToggleRow{
  position:relative;display:grid;grid-template-columns:auto 1fr;align-items:start;gap:11px;
  padding:11px 13px;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--line) 85%,transparent);border-radius:12px;
  background:color-mix(in srgb,var(--surface-input,var(--panel)) 85%,transparent);
}
.driveToggleRow input{position:absolute;opacity:0;pointer-events:none}
.driveToggleBox{
  width:19px;height:19px;margin-top:1px;border-radius:6px;position:relative;
  border:2px solid color-mix(in srgb,var(--accent) 45%,var(--line));background:var(--surface-input,var(--panel));
}
.driveToggleRow input:checked~.driveToggleBox{background:var(--accent);border-color:var(--accent)}
.driveToggleRow input:checked~.driveToggleBox::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--accent-ink,#fff);border-width:0 2px 2px 0;transform:rotate(45deg)}
.driveToggleCopy{display:grid;gap:2px}
.driveToggleCopy strong{font-size:.82rem}
.driveToggleCopy small{color:var(--muted);font-size:.72rem;line-height:1.35}
.driveBackupName.disabled{opacity:.5}
.driveBackupName.disabled input{cursor:not-allowed}
.driveScheduleSection{
  display:grid;gap:9px;padding:12px;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));
  background:color-mix(in srgb,var(--surface-input,var(--panel)) 70%,transparent);
}
.driveScheduleRow{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.driveScheduleRow select,.driveScheduleRow input[type="time"]{
  width:100%;padding:8px 10px;font-family:inherit;font-size:.82rem;
  border:1px solid color-mix(in srgb,var(--line) 85%,transparent);border-radius:9px;
  background:var(--surface-input,var(--panel));color:var(--text);
}
.driveScheduleRow label[hidden]{display:none}
.driveScheduleNote{margin:0;color:var(--muted);font-size:.7rem;line-height:1.45}