/* Daily Life Doc, round 15 (zone A): Import on the Atlas tab (js/atlas/atlas-import.js) and Add to Atlas in Chat
   (js/chat/chat-atlas-add.js). The import's suggestions stand on the care pink of every AI suggestion (the pink "Add
   to plan" in Chat, the "AI" tag), each row laid out like a field of the tab (name column, value) on the card's
   ground, with Apply and Skip at its right. In Chat, Add to plan and Add to Atlas stand together where Add to plan
   stood; the pink suggestion under a message is chat.css's .cm-sug. */

/* The sheet Import */
.aimp-f { display: flex; flex-direction: column; gap: 10px; }
.aimp-f textarea.ain { max-width: none; min-height: 150px; }
.aimp-pick { display: flex; align-items: center; gap: 10px; min-width: 0; }
.aimp-fn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-xs); color: var(--ink2); }

/* The suggestions on the tab */
.aim { margin: 10px 0 2px; padding: 10px 10px 8px; border-radius: 14px; background: var(--care); color: var(--care-d);
  animation: aim-in var(--m-add, .2s) var(--ease-out, ease); }
@keyframes aim-in { from { opacity: 0; transform: translateY(-4px); } }
.aim-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 0 2px 0 4px; font-size: var(--t-sm); }
.aim-t { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.aim-t b { font-weight: 600; }
.aim-h .qw, .aim-w { font-size: var(--t-xs); color: var(--care-d); }
.aim-b { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.aim .pill:not(.dark) { background: var(--surface); color: var(--ink); }
.aim-r { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 6px; padding: 8px 10px;
  border-radius: 10px; background: var(--card); color: var(--ink); transition: opacity var(--m-remove, .18s) ease, transform var(--m-remove, .18s) ease; }
.aim-r.leaving { opacity: 0; transform: translateX(6px); }
.aim-r .an { display: flex; flex-direction: column; font-size: var(--t-sm); color: var(--ink2); line-height: 1.3; }
.aim-r .an small { font-size: var(--t-2xs); color: var(--ink3); }
.aim-r .av { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-size: var(--t-s); overflow-wrap: anywhere; }
.aim-new { padding: 1px 8px; border-radius: 7px; background: var(--try-bg); color: var(--try-d); font-size: var(--t-2xs); font-weight: 600; }

@media (max-width: 600px) {
  .aim-r { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .aim-r .aim-b { justify-content: flex-start; margin-top: 4px; }
}

/* Chat: Add to plan and Add to Atlas together (chat.css places .cm-add under or beside the message). */
.cm-add { display: inline-flex; gap: 6px; }

/* The card's head on a phone: Import and Edit go under the name, so the name and the count keep the width. */
@media (max-width: 480px) {
  .ahd { flex-wrap: wrap; row-gap: 6px; }
  .ahd .wt { flex: 1 1 calc(100% - 56px); }
  .ahd [data-imp-open] { margin-left: 52px; }
}